title: Collapsing priority in Bootstrap
body: <p>I have four wells in two rows. Here's my code:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-8 well"&gt;
              &lt;h1&gt;1&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4 well"&gt;
              &lt;h1&gt;3&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-8 well"&gt;
              &lt;h1&gt;2&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4 well"&gt;
              &lt;h1&gt;4&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the bootply: <a href="http://bootply.com/100389" rel="nofollow">http://bootply.com/100389</a></p>
  
  <p>Now, it is visible to us as:</p>
  
  <pre><code>|  1  | 3 |
  |-----|---|
  |  2  | 4 |
  </code></pre>
  
  <p>In mobile devices, the order is 1 then 3 then 2 and then 4.</p>
  
  <p>But, what I want is that the ordering should be 1,2,3 and then 4. How do I do that?</p>