用CSS实现移动端Flex列交替排列（无需JS）

先说一个常见的场景：桌面端是双栏 Flex 布局，到了移动端需要变成单列滚动。常规做法是给外层容器加个 flex-direction: column，这虽然能把两列堆叠起来，但只能做到“A/B 整体在上，C/D/E 整体在下”——它无法实现跨列交错排列，比如你想要 A → C → D → E → B 这样的顺序。这时候，很多人会想到用 Ja vaScript 或 React 去重新组织 DOM，但这样不仅增加了复杂度，还会影响可维护性和性能。

其实，CSS 早就准备好了更优雅的解法：display: contents。

你猜怎么着？这个属性的效果相当直接——它让元素自身不参与渲染，不占文档流、没有盒模型，但它的子元素依然会作为父容器 Flex 上下文的直接子项存在。换句话说，它相当于把中间层给拆了，让 .box 元素直接变成 .flex-container 的一级子项。然后，配合 order 属性，就能精确控制每个 box 的视觉顺序。

下面直接上代码，一目了然：

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

  .column {
    display: contents; /* 关键：抹平 column 容器，暴露所有 .box */
  }

  /* 指定 Box B 排在第 2 位（索引从 0 开始，0=A, 1=C, 2=B, 3=D, 4=E）*/
  .boxA { order: 0; }
  .boxC { order: 1; }
  .boxB { order: 2; } /* 原本在 left-column 末尾，现插入中间 */
  .boxD { order: 3; }
  .boxE { order: 4; }
}

划重点：

• display: contents 的兼容性已经相当不错（Chrome 65+、Firefox 63+、Safari 15.4+、Edge 79+）。如果还要照顾旧版 Safari（低于 15.4），可以试试加 -webkit-display: contents——不过事实上没有厂商前缀支持，所以最好还是去 caniuse 上评估一下。
• order 的默认值是 0，没显式声明的元素会按照 HTML 源码顺序排列（比如 .boxA 和 .boxC 就保持着原有的相对位置）。所以你只需要给要“插队”的元素设置 order 就行，比如这里把 .boxB 放到了第二的位置。
• 这套方案完全基于 CSS，不用改 HTML 结构，更不用引入 JS 逻辑。对 React、Vue 这类框架零侵入，在 SSR 场景下尤其舒服，对无障碍访问也很友好——DOM 结构没变，只是渲染顺序变了。

最终效果很清晰：桌面端保持 2:1 双栏布局，到移动端自动变成单列，而且子元素严格按照 A → C → D → E → B 的顺序呈现。既满足了设计需求，也守住了“样式归样式、结构归结构”这个前端的最佳实践。