How to format blocks correctly using flex?

Question

css

There are 5 elements inside the block.
How can I make sure that at the resolution I need, two elements are on the same line, the third element is on the 2nd, and the last two are on the third line? If at different resolutions they change their position through Order relative to each other.
Those. I could wrap where I have TWO elements in BLOCKS and then there would be three lines, I would write them column.
But then they change their position so that I then have to pull the element out of the "pair wrapper", but I don't know how to do it.

Answer 1

Set a style for each block.
just a sketch for an example. here you already write on flex what and how to stretch and to whom what order.

@media (width: 1024px) {
  .box-1,
  .box-2 {
    width: 50%;
  }
  .box-3 {
    width: 100%;
  }
  .box-4,
  .box-5 {
    width: 50%;
  }
}

@media (width: 768px) {
  .box-1 {
    width: 100%;
  }
  .box-2, .box-3, .box-4 {
    width: 33%;
  }
  .box-5 {
    width: 100%;
  }
}