title: Moving column to next line using Flex Box
body: <p>I have three columns, ordering 1,2,3. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="flex-container"&gt;
      &lt;div class="item first"&gt;1&lt;/div&gt;
      &lt;div class="item second"&gt;2&lt;/div&gt;
      &lt;div class="item third"&gt;3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.flex-container {
      display: flex;
  }
  .item {
      background: orange;
      padding: 10px auto;
      color: #fff;
      font-family: arial;
      flex-grow: 100;
      flex-shrink: 50;
      text-align: center;
  }
  .first {
      order: 1;
  }
  .second {
      order: 2;
  }
  .third {
      order: 3;
  }
  </code></pre>
  
  <p>What I want when I switch to mobile screen columns should display like this;</p>
  
  <pre><code>1 3
  2 
  </code></pre>
  
  <p><strong>Media Query</strong></p>
  
  <pre><code>/* Too narrow to support three columns */
   @media all and (max-width: 640px) {
      .second {
          order: 3;
          /* And go to second line */
      }
      .third {
          order: 2;
      }
  }
  </code></pre>
  
  <p>Column two should move to next line. </p>
  
  <p><a href="http://jsfiddle.net/aash1010/422j7/8/" rel="noreferrer">Fiddle</a></p>
  
  <p>How can I do this?</p>