title: Flexbox: move middle element to the next line
body: <p>I have a <code>flex</code> item that has three <code>divs</code> inside of it.</p>
  
  <pre><code>┌────────────────────────────────────────┐
  |                WRAPPER                 |
  |   ┌─────────┬───────────┬──────────┐   |
  |   |  LEFT   |   CENTER  |   RIGHT  |   |
  |   |         |           |          |   |
  |   └─────────┴───────────┴──────────┘   |
  └────────────────────────────────────────┘
  </code></pre>
  
  <p>And I want to move the <code>center</code> column to the next line in small screens (less than 600px). It should occupy the 100% of the width of the screen.</p>
  
  <p>The problem I have is that when the <code>center</code> column comes to the next line, the <code>right</code> column does not fit on the wrapper.</p>
  
  <p>Here is my <code>HTML</code> code:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div class="block left"&gt;Left&lt;/div&gt;
      &lt;div class="block center"&gt;Center&lt;/div&gt;
      &lt;div class="block right"&gt;Right&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my <code>CSS</code> code:</p>
  
  <pre><code>html, body{
    height: 100%;
  }
  
  body{
    margin: 0;
  }
  
  #wrapper{
    display: flex;
    width: 100%;
    height: 50px;
    align-items: center;
    text-align: center;
  }
  
  .block{
    height: 50px;
  }
  
  .left{
    width: 20%;
    background-color: red;
    order: 1;
  }
  
  .center{
    width: 60%;
    background-color: green;
    order: 2;
  }
  
  .right{
    width: 20%;
    background-color: blue;
    order: 3;
  }
  
  @media all and (max-width: 600px) {
    #wrapper{
      flex-flow:column wrap; 
      height: 100px;
    }
    .center {
      width: 100%;
      order: 3;
    }
  
    .left{
      width: 50%;
    }
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/wqLezyfe/" rel="noreferrer">JSFiddle</a> where you can see how it is displayed.</p>
  
  <p>Is it possible to move the middle column to the next line occupying 100% of the width of the screen using <code>flexbox</code>? If it is, what am I missing?</p>
  
  <p>Thanks in advance!</p>