How to use Flex CSS and simulate a rowspan 2 and colspan 2
<p>I want to build a responsive layout with  2 rows using divs .</p>

<p>I try this jsbin: <a href="http://jsbin.com/jiyanayayi/edit?html,css,output" rel="noreferrer">http://jsbin.com/jiyanayayi/edit?html,css,output</a></p>

<p>The first row will have three cells, the last one (cell 3) must have a <code>rowspan = 2</code> </p>

<p>The second row (cell4) having a <code>colspan = 2</code> must be limited by the cell 3. </p>

<p>I tried the CSS below, but the <code>rowspan</code> atribute did not work.</p>

<p>How can I create this responsive layout format?</p>

<pre><code>.row{
  display: flex;
}
.cell{
  flex: 1;
  background:#eee;
  border: 1px solid #444;
  padding: 15px;
}
</code></pre>

<p>The HTML:</p>

<pre><code>&lt;div class="table"&gt;
    &lt;div class="row"&gt;
        &lt;div class="cell"&gt;Cell 1 &lt;/div&gt;
        &lt;div class="cell"&gt;Cell 2 &lt;/div&gt;
        &lt;div class="cell rowspan2"&gt;Cell 3 &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
        &lt;div class="cell colspan2"&gt;Cell 4&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>