title: Twitter Bootstrap 3 : Customize column stack order when viewed in Mobile screen
body: <p>I made a simple bootstrap page using Grid system. I have 3 columns having content <code>Hello 1</code>, <code>Hello 2</code> and <code>Hello 3</code>. When viewed in Desktop all 3 appear as adjacent columns. When viewed in a mobile screen the columns get stacked as <code>Hello 1</code> on top, then <code>Hello 2</code> and finally <code>Hello 3</code>.</p>
  
  <p>I wanted to know how to make <code>Hello 3</code> on top, then <code>Hello 1</code> and finally <code>Hello 2</code>. Here is a <a href="http://jsfiddle.net/ahgqqdfb/1/" rel="nofollow">DEMO</a>.</p>
  
  <p>And here is the HTML code:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-4"&gt;
              &lt;div class="panel panel-primary"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h3 class="panel-title"&gt;Panel title&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                 Hello 1
              &lt;/div&gt;
              &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4"&gt;
               &lt;div class="panel panel-primary"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h3 class="panel-title"&gt;Panel title&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                 Hello 2
              &lt;/div&gt;
              &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4"&gt;
               &lt;div class="panel panel-primary"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h3 class="panel-title"&gt;Panel title&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                 Hello 3
              &lt;/div&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>