title: Flexbox rearrange orders in between 2 nested items
body: <p>I have a flexbox that has 2 boxes on the left and 1 box on the right.  I need for the box on the right to wedge between the two boxes on the left.  </p>
  
  <p>[EDIT:Clarification]Box 3 should fully expand to consume the same space as boxes 1 and 2 on the left side.[/EDIT]</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.rowParent {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
  }
  .flexChild {
    flex: 1;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
  }
  .flexChild2 {
    flex: 1 100%;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
  }
  #columnChild41158 {
    background-color: green;
    order: 1;
  }
  #columnChild61714 {
    background-color: red;
    order: 3;
  }
  #rowChild24054 {
    background-color: blue;
    order: 2;
  }
  @media (min-width: 1000px) {
    .columnParent {
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
    }
    .flexChild2 {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container" class="flexChild rowParent"&gt;
    &lt;div id="rowChild71124" class="flexChild2 columnParent"&gt;
      &lt;div id="columnChild41158" class="flexChild"&gt;1&lt;/div&gt;
      &lt;div id="columnChild61714" class="flexChild"&gt;2&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="rowChild24054" class="flexChild"&gt;3&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's a codepen of what I am trying to do:</p>
  
  <p><a href="http://codepen.io/ants/pen/rLYVPa" rel="nofollow">http://codepen.io/ants/pen/rLYVPa</a></p>
  
  <p>Currently it is:</p>
  
  <pre><code>1       3        
  2
  </code></pre>
  
  <p>Once the browser is under 1000px I want it to stack as 100% width items but as:</p>
  
  <pre><code>1
  3
  2
  </code></pre>
  
  <p>I tried using order but that doesn't seem to work.</p>