flex布局中交换蓝绿块且不改变left2、right2位置的实现方案

针对不能使用order属性、且不能改动后续left2、right2位置的需求，这里提供两种可落地的方案：

方案1：仅修改CSS（无需调整HTML结构） #

核心利用transform属性做视觉平移，不会改动文档流布局，和页面总块数完全无关，不会影响其他元素位置。
新增CSS代码如下：

#flex #right {
  transform: translateX(100%);
}
#flex #left {
  transform: translateX(-100%);
}

注意：该方案仅改变元素的视觉显示位置，元素的实际交互触发区域（点击、hover等）仍保留在原始位置，如果有交互需求推荐使用方案2。

方案2：少量调整HTML结构（无交互副作用） #

如果允许微调HTML，可将需要交换的两个块单独包裹在一层flex容器中，直接反转该容器的排列顺序即可，完全不影响其他元素的样式和布局。
调整后的HTML代码：

<div id="flex">
  <div id="center"></div>
  <!-- 新增包裹容器 -->
  <div style="width: 100%; display: flex; flex-direction: row-reverse;">
    <div id="right"></div>
    <div id="left"></div>
  </div>
  <div id="left2"></div>
  <div id="right2"></div>
</div>

该方案直接修改了元素的实际排列顺序，不存在交互区域错位的问题，兼容性更好。

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