title: Problems building a flexbox grid
body: <p>I'm trying to build myself a flexbox with the following design:</p>
  
  <p><a href="https://i.stack.imgur.com/Sy20K.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Sy20K.jpg" alt=""></a></p>
  
  <p>My html looks like this (and I would like to NOT change this):</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;div class="page-header"&gt;Heading&lt;/div&gt;
    &lt;h3 class="right_1"&gt;right_1&lt;/h3&gt;
    &lt;div class="right_2"&gt;right_2&lt;/div&gt;
    &lt;div class="left"&gt;form element&lt;/div&gt;
    &lt;h3 class="right_3"&gt;right_3&lt;/h3&gt;
    &lt;div class="right_4"&gt;right_4&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the standard layout of the joomla contact page. I want to change the design though without altering html/php code.</p>
  
  <p>Is that possible using flexbox?</p>
  
  <p>And can I use <code>@media</code> queries to make <code>right_1</code> - <code>right_4</code> to move under <code>left</code> on mobile view (&lt; 800px or example)?</p>
  
  <p>I myself cannot get it to work, I always end up with <code>right_1</code> - <code>right_4</code> next to each other instead of them stacking to the total height of the left portion.</p>