title: Bootstrap push/pull column issue
body: <p>I have 4 columns like this</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-3"&gt; col3&lt;/div&gt;
      &lt;div class="col-md-1"&gt; col1&lt;/div&gt;
      &lt;div class="col-md-4"&gt; col4&lt;/div&gt;
      &lt;div class="col-md-4"&gt; col4&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Normally it looks like this:
  <br>
  [3][1][4][4]</p>
  
  <p>When it's in smaller viewport, I want it to show like this:<br>
  [4]<br>
  [4]<br>
  [3]<br>
  [1]<br></p>
  
  <p>I have tried </p>
  
  <pre><code> &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-3 col-md-push-8"&gt; col3&lt;/div&gt;
          &lt;div class="col-md-1 col-md-push-8"&gt; col1&lt;/div&gt;
          &lt;div class="col-md-4 col-md-pull-4"&gt; col4&lt;/div&gt;
          &lt;div class="col-md-4 col-md-pull-4"&gt; col4&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>It shows: <br>
  In large viewport:<br>
  [4][4][3][1]<br><br>
  In viewport that those columns collapse: <br>
  [3]<br>[1]<br>[4]<br>[4]<br>
  But it seems like what I did is completely reversed... <br>
  A created a codepen snippet <a href="http://codepen.io/ngp130895/pen/Kzxdpj" rel="nofollow">http://codepen.io/ngp130895/pen/Kzxdpj</a> 
  How can I achieve this?</p>