Can not fix the order of display:flex elements

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.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;
}

<!-- language: lang-html -->

<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>

<!-- end snippet -->

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.

Hope it helps

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

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

.column>div {
  width: 40%;
}

<!-- language: lang-html -->

<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>

<!-- end snippet -->