title: Flexbox: Layout with rowspan
body: <p>My HTML is similar to the following example</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
   &lt;div id="a"&gt;a&lt;/div&gt;
   &lt;div id="b"&gt;b&lt;/div&gt;
   &lt;div id="c"&gt;c&lt;/div&gt;
   &lt;div id="d"&gt;d&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>On desktop I'd like the divs to display next to each other which is of course trivial.</p>
  
  <p>On mobile I'd like have table-like layout with similar to the following</p>
  
  <p><img src="https://i.stack.imgur.com/9dWku.png" alt="enter image description here"></p>
  
  <p>b, c and d have flexible height so a would have to adjust to that.</p>
  
  <p>Is that possible to do without wrapping b,c and d in a separate div?</p>