flexbox displaying sub-div at the top
<p>This is what I want to do:</p>

<p><a href="https://i.stack.imgur.com/YR7fL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YR7fL.png" alt="screenshot"></a></p>

<p>I have the brown part separately at the top as a <code>div</code>. Then the other colors  in a <code>content</code> <code>div</code>. </p>

<p>I don't understand how to bring the blue part at the top for &lt; 768px since it is inside the <code>content</code> <code>div</code> .</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;style&gt;
    body{
      margin: 0;
      padding: 0;
    }
    .container{
      display: flex;
      flex-direction: column;
    }
    .aquablue{
      padding: 50px;
      background-color: #B0C4DE;
      order: 1;
    }
    .brownC{
      padding: 50px;
      background-color: #663300;
    }
    .yellowC{
      padding: 50px;
      background-color:  #FFCC00;
      order: 3;
    }
    .greenC{
      padding: 50px;
      background-color: #00FF00;
      order: 4;
    }
    .blueC{
      padding: 50px;
      background-color: #336699;
      order: 5;
    }
    @media(min-width: 768px){
      .container{
        display: flex;
        flex-direction: column;
      }
      .content{
        display: flex;
        order: 2;
      }
      .left{
        display: flex;
        flex-direction: column;
        width: 50%;
      }
      .right{
        display: flex;
        flex-direction: column;
        width: 50%;
      }
      .brownC{
        padding: 50px;
        background-color: #663300;
        width: 100%;
        order: 1;
      }
      .yellowC{
        padding: 50px;
        background-color:  #FFCC00;
      }
      .greenC{
        padding: 50px;
        background-color: #00FF00;
      }
      .blueC{
        padding: 50px;
        background-color: #336699;
      }
    }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
     &lt;div class="container"&gt;
      &lt;div class="brownC"&gt;&lt;/div&gt;
      &lt;div class="content"&gt;
        &lt;div class="left"&gt;  
          &lt;div class="aquablue"&gt;&lt;/div&gt;
          &lt;div class="yellowC"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="right"&gt; 
          &lt;div class="greenC"&gt;&lt;/div&gt;
          &lt;div class="blueC"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>