如何在复杂的Flexbox布局+交换元素中构造框模型

Question

在某些视口中，我希望能够交换某些div，如下图所示。
我不想使用解决方法，例如在这里和那里复制相同的div，然后使用display:none来隐藏它们，所以请不要建议这个解决方案，除非你认为这是实现这一目标的唯一方法。

您如何使用Flexbox解决此问题？盒子模型会是什么样的？

到目前为止我尝试过：

• 使用order CSS选择器。但它只有在所有div都在同一容器中时才有效（似乎不能解决这个问题）。
• A1和A2在视觉上是单个项目，正如其颜色所示，但我想我可能需要将其拆分为2

PS：请注意问题不在于如何自己构建任何这些布局，也不知道如何使用媒体查询。