title: Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3
body: <p>I'm now reading documentation on Twitter Bootstrap 3, and tried to follow column ordering as shown in  <a href="http://getbootstrap.com/css/#grid">this page</a>  but hit the wall. I don't understand why such a code works nor how to correctly specify the setting. What I want to show is one grid, which is consisted of length 5, and the other length 5, and finally one length 2 grid.</p>
  
  <p>So mine is something like this:</p>
  
  <pre><code>[5] [5] [2]
  </code></pre>
  
  <p>And what I want to achieve is, when it's viewed on Desktop the layout above is displayed, but when it's viewed on mobile, I want to show the second length 5 object first, then the first length 5 object, and finally the length 2 object, vertically. Like this:</p>
  
  <pre><code>[5] (second)
  [5] (first)
  [2]  
  </code></pre>
  
  <p>While I tried to follow the step explained in the above documentation, I got the first length 5 object over the second one despite being on mobile platforms, which as I said should display second length 5 object on the top. In other words, I got this:</p>
  
  <pre><code>[5] (first)
  [5] (second)
  [2] 
  </code></pre>
  
  <p>So how can I correctly put the second one over the first? Or since I use the same length object, could the column ordering not work?</p>
  
  <p>Here's my code for your information:</p>
  
  <pre><code>&lt;div class='row'&gt;
  &lt;div class='col-lg-5 col-lg-push-5'&gt;&lt;/div&gt;
  &lt;div class='col-lg-5 col-lg-pull-5'&gt;&lt;/div&gt;
  &lt;div class='col-lg-2'&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Also, the documentation doesn't clarify what <code>pull</code> or <code>push</code> means. So am I missing something?</p>
  
  <p>Thanks.</p>