title: In Twitter Bootstrap 2, how can I get right columns to move to the top when shrinking the screen?
body: <p>I'm using a 2-column fluid layout in Twitter Bootstrap.  The left column is the main content (span10), and the right column is a sidebar for widgets (span2).  Currently, when resizing the browser window, Bootstrap responds by creating one column with the leftmost section on top, and the rightmost on bottom.  I'd like it the other way around.  </p>
  
  <p>This is the gist of my html:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="content" class="container-fluid"&gt;
      &lt;div id="content-row-1" class="row-fluid"&gt;
        &lt;div id="mainContainer" class="span10"&gt; Lots of content goes here &lt;/div&gt;
        &lt;div id="sidebar" class="span2"&gt; Widgets   &lt;/div&gt;
      &lt;/div&gt;  &lt;!-- content-row-1 --&gt;
    &lt;/div&gt;  &lt;!-- content --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Is there any way to have <code>mainContainer</code> on the left and widgets on the right in a wide window, but snap <code>sidebar</code> to the top when the window shrinks?</p>