Moving a flex item from inside a column of items to its own column
<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>