Divs with FLEXBOX do not align correctly

Question

I am new with FLEXBOX and I am developing a layout that would follow this structure:

But I was only able to achieve that result:

.container {
  width: 100%;
  background-color: #CCC;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.div1 {
  width: 50%;
  height: 200px;
  background-color: #FF0;
  flex-grow: 0;
  order: 1;
}

@media screen and (max-width: 700px) {
  .div1 {
    width: 100%;
    height: 40px;
    background-color: #FF0;
    flex-grow: 0;
    order: 1;
  }
}

.div2 {
  width: 50%;
  height: 40px;
  background-color: #FC0;
  align-self: flex-end;
  flex-grow: 0;
  order: 2;
}

@media screen and (max-width: 700px) {
  .div2 {
    width: 100%;
    height: 40px;
    background-color: #FC0;
    flex-grow: 0;
    order: 2;
  }
}

.div3 {
  width: 50%;
  height: 40px;
  background-color: #F90;
  align-self: flex-end;
  flex-grow: 0;
  order: 3;
}

@media screen and (max-width: 700px) {
  .div3 {
    width: 100%;
    height: 40px;
    background-color: #F90;
    flex-grow: 0;
    order: 3;
  }
}

.div4 {
  width: 50%;
  height: 40px;
  background-color: #F60;
  align-self: flex-end;
  flex-grow: 0;
  order: 4;
}

@media screen and (max-width: 700px) {
  .div4 {
    width: 100%;
    height: 40px;
    background-color: #F60;
    flex-grow: 0;
    order: 4;
  }
}

.div5 {
  width: 50%;
  height: 100px;
  background-color: #0C6;
  flex-grow: 0;
  order: 5;
}

@media screen and (max-width: 700px) {
  .div5 {
    width: 100%;
    height: 40px;
    background-color: #0C6;
    flex-grow: 0;
    order: 5;
  }
}

.div6 {
  width: 50%;
  height: 40px;
  background-color: #396;
  align-self: flex-end;
  flex-grow: 0;
  order: 6;
}

@media screen and (max-width: 700px) {
  .div6 {
    width: 100%;
    height: 40px;
    background-color: #396;
    flex-grow: 0;
    order: 6;
  }
}

<div class="container">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
  <div class="div5">5</div>
  <div class="div6">6</div>
</div>

EDIT

Sorry, I wanted to simplify the situation and so I posted only the layout block that theoretically would matter to the solution of the problem. But the solution (which works perfectly in the presented scenario) presented by hugocsl does not work in the "complete" scenario. Follows the new image:

Answer 1

Follow an option with flex, which has the option to use the attribute order in the children and can be distributed in columns using the flex-direction:column.

The detail is that the div 1 occupies 70% of the height, and the div 5 occupies 30% of the height, so the first column is completely filled by these two elements, and the rest of the child elements will be "aligned" in the second column.

---

EDIT

As the div 5 will have a fixed height, and the div 1 no, just make a calc at the time of div 1, would look like this for example height: calc(100% - var(--altura));, a na div 5 the height is height: var(--altura);

See that var(--altura) is the CSS variable that you will define in :root, so you don’t have to keep changing the value in various places, you change in the :root the value of the variable and this value changes everywhere, and so the height of div 1 will always be 100% minus the antura of div 5

:root {
    --altura: 100px; 
}

Follow the code referring to the image above:

:root {
    --altura: 100px;
}
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 100%;
}
[class^="div"] {
    width: 50%;
}
.div1 {
    height: calc(100% - var(--altura));
    order: 1;
    background-color:#FF0;
}
.div5 {
    height: var(--altura);
    order: 1;
    background-color:#0C6;
}
.div2 {
   background-color:#FC0;
}
.div3 {
   background-color:#F90;
}
.div4 {
   background-color:#F60;
}
.div6 {
   background-color:#396;
}
.div2, .div3, .div4, .div6 {
    order: 2;
}

@media screen and (max-width: 700px) {
    :root {
        --altura: initial;
    }
    .container {
        height: auto;
    }
    [class^="div"] {
        width: 100%;
        order: initial;
    }
}

<div class="container">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
    <div class="div5">5</div>
    <div class="div6">6</div>
</div>