I have the following 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>
I am trying to make the F be right under D, like this:
The main reason I am doing this instead of 2 separate columns is because I want to be able to arrange the columns in mobile later by using order. Is this possible in Flexbox, or is there another way?