title: Bootstrap 3 column ordering on collapse
body: <p>I have these two columns inside a row:</p>
  
  <pre><code>                &lt;div class="row"&gt;
                      &lt;div class="col-lg-4 col-md-4 col-sm-4"&gt;
                           &lt;p&gt;Column A&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="col-lg-8 col-md-8 col-sm-8"&gt;
                          &lt;p&gt;Column B&lt;/p&gt;
                          &lt;div style="padding:10px;" class="text-center"&gt;
                              &lt;a href="#" class="btn btn-dark pulse2"&gt;&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>So that whe the screen size turns to xs they collapse in this order:</p>
  
  <p>Column A</p>
  
  <p>Column B</p>
  
  <p>But how can I make them collapse the other way 'round?
  From other questions I red I tried to add the class <code>col-sm-pull-8</code> to the A column and <code>col-sm-push-4</code> to the B Column.</p>
  
  <p>But it doesn't work, it just mess up the layout and they still collapse like:</p>
  
  <p>Column A</p>
  
  <p>Column B</p>