How to make two unequal columns on flexbox?

Question

css

How to make a similar orientation of the columns, as in the screenshot?

spoiler

At the same time, so that at the necessary breakpoint everything can be conveniently arranged in one column:

spoiler

Answer 1

I propose three divas. all display flex
in the first div blocks 1 and 2 . only reverse direction (then block 1 will be on the right, block 2 on the left)
in the second div 3 and 4
in the third div blocks 5 and 6 , flex-direction: column; align-items: flex-end;
the first two blocks have flex-wrap: wrap;
all nested blocks have width:100% on mobiles and 50% on desktops
https://codepen.io/Lareta/pen/dxoVJb

Answer 2

So make 2 wrappers in the form of columns and inside each make lines, as needed, and with the necessary breakpoint, just rebuild the parent columns into lines

Answer 3

Perhaps this solution will suit you, but it needs to be finalized. You can change the position of elements with the order property, but on condition that the parent has display: flex

.parent {
  display: flex;
  height: 500px;
  flex-flow: column wrap;

  .child {
    &:nth-child(1) {
       order: 6;
    }
    ...
  }
}