title: How to switch column position with bootstrap (desktop / smartphone)?
body: <p>How can I do the following? Push / Pull?</p>
  
  <p>Desktop:</p>
  
  <p><a href="https://i.stack.imgur.com/E7YiF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E7YiF.png" alt="Desktop"></a></p>
  
  <p>Smartphone:</p>
  
  <p><a href="https://i.stack.imgur.com/OIFCE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OIFCE.png" alt="Smartphone"></a></p>
  
  <p>I started with this.</p>
  
  <pre><code>&lt;div class="row"&gt;
  &lt;div class="col-md-3 col-sm-6 col-xs-6 text-center"&gt;
          Some Small Object
  &lt;/div&gt;
  &lt;div class="col-md-6 col-sm-12 col-xs-12 text-center"&gt;
          Some Larger Object
  &lt;/div&gt;
  &lt;div class="col-md-3 col-sm-6 col-xs-6 text-center"&gt;
          Some Small Object
  &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>Solution (03-21-2016):</strong></p>
  
  <pre><code>&lt;div class="row"&gt;
  &lt;div class="col-xs-6 col-md-3 text-center"&gt;
    A
  &lt;/div&gt;
  &lt;div class="col-xs-6 col-sx-push-0 col-md-3 col-md-push-6 text-center"&gt;
    C
  &lt;/div&gt;
  &lt;div class="col-xs-12 col-sx-pull-0 col-md-6 col-md-pull-3 text-center"&gt;
    B
  &lt;/div&gt;&lt;/div&gt;
  </code></pre>