Can not fix the order of display:flex elements

Question

.test {
  display: flex;
  flex - direction: column;
  flex: 1;
  flex - wrap: wrap;
}

.break {
  flex - basis: 100 %;
  height: 0;
}

.b {
  width: 500 px;
  height: 50 px;
  border: 1 px solid red;
  flex - basis: 20 %;
  flex - wrap: nowrap;
}

.flex1 {
  display: flex;
  flex - direction: row;
}

.test2 {
  display: flex;
  flex - direction: column;
  flex - wrap: nowrap;
}

.bb {
  display: flex;
}

.flex2 {
  display: flex;
  flex - wrap: wrap;
}

.flex3 {
  display: flex;
  flex - direction: row;
  flex - wrap: wrap;
  align - items: center;
}

<div class="test">
  <div class="flex1">
    <div class="1 b">1</div>
    <div class="2 b">1</div>
  </div>
  <div class="test2">
    <div class="flex2">
      <div class="3 b">2.1</div>
      <div class="4 b">2.2</div>
      <div class="break"></div>
      <div class="5 b bb">2.3</div>
    </div>

    <div class="flex3">
      <div class="3 b bb">3.1</div>
      <div class="break"></div>
      <div class="4 b">3.2</div>
      <div class="break"></div>
      <div class="5 b">3.3</div>
    </div>
  </div>
</div>

I have a problem with a display:flex when ordering the elements. I want to achieve the same thing as in the image . I want the 3.1 to be in the same row as the 2.3 and the 3.2 and the 3.3 to stay exactly the same as in the image.

Here is the image example that I want to achieve

I want to achieve this behavior in the media queries, the HTML order should stay the same.

Answer 1

Hope it helps

.row {
  display: flex;
  gap: 30px;
}

.item {
  flex: 0 0 40%;
  padding: 10px;
  border: 1px solid red;
}

.column>div {
  width: 40%;
}

<div class="container">
  <div class="row">
    <div class="item">1</div>
    <div class="item">1</div>
  </div>
  <div class="row">
    <div class="item">2.1</div>
    <div class="item">2.2</div>
  </div>
  <div class="row">
    <div class="item">2.3</div>
    <div class="item">3.1</div>
  </div>
  <div class="column">
    <div class="item">3.2</div>
    <div class="item">3.3</div>
  </div>
</div>