I'm grappling with the following chunk of code:
.wrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.a {
background-color: red;
width: 65%;
}
.b {
background-color: green;
width: 35%;
}
.c {
background-color: blue;
width: 65%;
height: 100px;
}
.d {
background-color: orange;
width: 35%;
}
.e {
background-color: teal;
width: 65%;
}
.f {
background-color: purple;
width: 35%;
}<div class="wrapper container">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
<div class="e">E</div>
<div class="f">F</div>
</div>https://i.sstatic.net/IjpIE.png
I want to position F right under D, as shown in this diagram:
https://i.sstatic.net/5vGLQ.png
My rationale for using a single column instead of two separate columns is so that I can reorganize them on mobile later using order. Is it possible to achieve this layout in Flexbox, or is there another approach?