Flexbox 3 divs, two columns, one with two rows : <p>I am trying to take</p>

<pre><code>&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
</code></pre>

<p>Three sequential divs and turn it into below. Where red is div 1, green is div 2, blue is div 3.</p>

<p>I can do this with floats, something like</p>

<pre><code>.div1 { float: left; }
.div2 { float: left; }
.div3 { float: left; }
</code></pre>

<p>But I can't seem to get it working in flexbox, is this possible?</p>

<p><a href="https://i.stack.imgur.com/1od7u.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1od7u.png" alt="enter image description here"></a></p>
