title: Bootstrap 3: Change vertical ordering of .col-X elements when collapsing
body: <p>I have the following layout when on a large display:</p>
  
  <pre><code>AAA BBB
  AAA CCC
  </code></pre>
  
  <p>(all A's, all B's, and all C's form one div, so there are 3 elements here)</p>
  
  <p>Now when this collapses I want it to become</p>
  
  <pre><code>BBB
  AAA
  AAA
  CCC
  </code></pre>
  
  <p>I tried specifying the elements in this order in the HTML, but then the best I could manage to get for the expanded view was (using .push-X classes)</p>
  
  <pre><code>AAA BBB
  AAA
      CCC
  </code></pre>
  
  <p>The only solutions I can think of are moving things around by JS, or having duplicates of <code>CCC</code> at the correct position and showing and hiding them depending on viewport size.</p>
  
  <p>Is there a cleaner way to do this?</p>