移动端将两列Flex容器合并为一列并自定义排序的实现方案

我有一个嵌套的Flex布局结构：外层是包含两列的flex容器，每一列本身也是flex容器，内部包含多个box元素，HTML代码如下：

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

目前我通过媒体查询，给.flex-container设置flex-direction: column，实现了移动端（800px以下）两列垂直排列，对应的CSS代码如下：

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

现在需要进一步调整移动端的元素显示顺序，让box呈现为 A、C、D、E、B 的排列。我原本觉得纯CSS做不到，因为需要拆分现有的列结构。这是React应用，我可以通过JS代码重排元素，但还是想优先用CSS实现，请问有没有可行的纯CSS方案？

内容的提问来源于stack exchange，提问作者Marco Castanho