title: How to use Flex CSS and simulate a rowspan 2 and colspan 2
body: <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>