title: Is there a way in Bootstrap to "split" a column on small screens?
body: <p>I'm using Bootstrap 3.
  On large screens I want to have a sidebar on the left and the maincontent on the right. On small screens I want to have important blocks of the sidebar on top, then the maincontent, then the less important blocks of the sidebar. Is there a way to achieve that?</p>
  
  <p>Here's a JS Bin showing the problem: <a href="http://jsbin.com/wibucopi/1/">http://jsbin.com/wibucopi/1/</a> and below is the current code (which, however, displays all sidebar content on top on small screens).</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-3"&gt;
        &lt;div class="upper" style="background:red"&gt;
          &lt;h3&gt;I want to be &lt;b&gt;above&lt;/b&gt; the main content on small screens!&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class="lower" style="background:green"&gt;
          &lt;h3&gt;I want to be &lt;b&gt;below&lt;/b&gt; the main content on small screens!&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-9"&gt;
        &lt;h1&gt;Main content&lt;/h1&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've already played around with <code>col-sm-pull/push-x</code>, but I could only achieve that the <strong>whole</strong> sidebar is displayed below the maincontent on small screens.</p>
  
  <p>I don't want to duplicate content and show / hide it with <code>visible-XY</code>, <code>hidden-XY</code>, as the page would get bigger and it feels just wrong.</p>
  
  <p>It would be great to have a <em>pure Bootstrap css</em> solution, or at least a css only one (I wouldn't like to use js).</p>