Html 将2个Flex列合并为1个交替子列

I have a flex container with 2 columns.
Each column is also a flex container with a number of boxes inside.

<div class="flex-container">
  <div class="column left-column">
    <div class="box boxA">Box A</div>
    <div class="box boxB">Box B</div>
  </div>
  <div class="column right-column">
    <div class="box boxC">Box C</div>
    <div class="box boxD">Box D</div>
    <div class="box boxE">Box E</div>
  </div>
</div>

I want that, in mobile view, the 2 columns become 1.
Right now I achieve this by adding flex-direction: column to the flex-container, which makes the 2 columns be one on top of each other (vertically, not z-axis).

.flex-container {
  display: flex;
  gap: 10px;
  padding: 10px;
  max-width: 800px;
}

.column {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}

.left-column {
  flex: 2;
}

.right-column {
  flex: 1;
}

.box {
  border: 1px solid lightgrey;
  border-radius: 8px;
  padding: 8px;
}

@media (max-width: 800px) {
.flex-container {
   flex-direction: column;
  }
}

But now I need additionally to rearrange the order of the boxes so that, in mobile view, it shows as A, C, D, E, B.个

我认为这不能仅用css来实现，因为它需要"打破"弹性列.

这是一个Sandbox ，里面有我目前拥有的:https://codepen.io/marcysutton/pen/ZYqjPj

Btw, this is in a React app, so I will probably have to rearrange the boxes programmatically.
I just preferred to do that with CSS, if possible.