title: Changing the stacking order in bootstrap 3
body: <p>At the xs width I need column two to display on top followed by column one then three. I've tried using push and pull to achieve this but it hasn't worked for me, what happens it the columns are pushed outside the container to the right and left.</p>
  
  <p>Heres my code:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12 col-sm-4 one"&gt;&lt;/div&gt;
          &lt;div class="col-xs-12 col-sm-4 two"&gt;&lt;/div&gt;
          &lt;div class="col-xs-12 col-sm-4 three"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  .one{
      background-color: red;
      height: 50px;
  }
  
  .two{
      background-color: green;
      height: 50px;
  }
  
  .three{
      background-color: blue;
      height: 50px;
  }
  </code></pre>