Ich verwende Bootstrap 3. Auf großen Bildschirmen möchte ich links eine Seitenleiste und rechts den Hauptinhalt haben. Auf kleinen Bildschirmen möchte ich wichtige Blöcke der Seitenleiste oben haben, dann den Hauptinhalt, dann die weniger wichtigen Blöcke der Seitenleiste. Gibt es einen Weg, das zu erreichen?

Hier ist ein JS Bin, der das Problem zeigt:http://jsbin.com/wibucopi/1/ und unten ist der aktuelle Code (der jedoch den gesamten Seitenleisteninhalt oben auf kleinen Bildschirmen anzeigt).

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3">
      <div class="upper" style="background:red">
        <h3>I want to be <b>above</b> the main content on small screens!</h3>
      </div>
      <div class="lower" style="background:green">
        <h3>I want to be <b>below</b> the main content on small screens!</h3>
      </div>
    </div>
    <div class="col-sm-9">
      <h1>Main content</h1>
      <p>Lorem ipsum dolor sit amet</p>
    </div>
  </div>
</div>

Ich habe schon rumgespieltcol-sm-pull/push-x, aber das konnte ich nur erreichenganze Die Seitenleiste wird unterhalb des Hauptinhalts auf kleinen Bildschirmen angezeigt.

Ich möchte keine Inhalte duplizieren und sie mit ein- / ausblendenvisible-XY, hidden-XY, da die Seite größer würde und es sich einfach falsch anfühlt.

Es wäre toll, eine zu habenreines Bootstrap CSS Lösung, oder zumindest ein CSS nur eine (ich würde nicht gerne js verwenden).