title: Bootstrap 3: Push/pull columns only on smaller screen sizes
body: <p>I have the following layout on a page:</p>
  
  <pre><code>&lt;div class="col-lg-3"&gt;1&lt;/div&gt;
  &lt;div class="col-lg-2"&gt;2&lt;/div&gt;
  &lt;div class="col-lg-2"&gt;3&lt;/div&gt;
  &lt;div class="col-lg-2"&gt;4&lt;/div&gt;
  &lt;div class="col-lg-3"&gt;5&lt;/div&gt;
  
   --------- ----- ----- ----- ---------
  |    1    |  2  |  3  |  4  |    5    |
   --------- ----- ----- ----- ---------
  </code></pre>
  
  <p>But on smaller screen sizes I would like the following layout:</p>
  
  <pre><code>&lt;div class="col-xs-6"&gt;1&lt;/div&gt;
  &lt;div class="col-xs-6"&gt;5&lt;/div&gt;
  &lt;div class="col-xs-4"&gt;2&lt;/div&gt;
  &lt;div class="col-xs-4"&gt;3&lt;/div&gt;
  &lt;div class="col-xs-4"&gt;4&lt;/div&gt;
  
   ----------------- -----------------
  |        1        |        5        |
   ----------------- -----------------
  |     2     |     3     |     4     |
   ----------- ----------- -----------
  </code></pre>
  
  <p>(Note the re-arranging of the column order.) Is it possible to push/pull columns only on smaller screen sizes? I've tried the following, but I get the oddest layout, and seem to lose <code>&lt;div&gt;5&lt;/div&gt;</code> completely...:</p>
  
  <pre><code>&lt;div class="col-lg-3 col-xs-6"&gt;1&lt;/div&gt;
  &lt;div class="col-lg-2 col-xs-4 col-xs-push-4"&gt;2&lt;/div&gt;
  &lt;div class="col-lg-2 col-xs-4&gt;3&lt;/div&gt;
  &lt;div class="col-lg-2 col-xs-4&gt;4&lt;/div&gt;
  &lt;div class="col-lg-3 col-xs-6 col-xs-pull-12"&gt;5&lt;/div&gt;
  </code></pre>