title: Moving a flex item from inside a column of items to its own column
body: <p>If I have a flex container with three children with <code>flex-direction: column</code>, and I want to move the middle child to the right while keeping the first and third child to the left, how would I do that? </p>
  
  <p>Is flexbox even the correct approach or is something else more appropriate?</p>
  
  <p>This is my attempt:  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    display: flex;
    flex-flow: row wrap;
    @media (max-width: 840px) {
      flex-flow: column wrap;
    }
  }
  .red,
  .green,
  .blue {
    width: 50%;
    @media (max-width: 840px) {
      width: 100%;
    }
  }
  .red {
    background-color: red;
    height: 100px;
  }
  .green {
    background-color: green;
    height: 300px;
  }
  .blue {
    background-color: blue;
    height: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="red"&gt;&lt;/div&gt;
    &lt;div class="green"&gt;&lt;/div&gt;
    &lt;div class="blue"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://codepen.io/dye/pen/mOeZma" rel="nofollow noreferrer">http://codepen.io/dye/pen/mOeZma</a></p>
  
  <p>It's close, but not quite there. When green div moves to the right, there's a big gap between red and blue.</p>
  
  <p>Any advice would be appreciated. Thank you!</p>