纯CSS实现移动端双列Flex容器子元素交替排列

响应式布局中的跨列排序需求

在响应式布局中，经常遇到这么个场景：桌面端我们设计成左右两列，每列各自是一个 Flex 容器，里面堆着几个盒子。到了移动端，希望这两列“拼接”成一条单列流，但顺序不能是简单的 A→B→C→D→E（按列块堆叠），而是需要跨列交错，比如 A→C→D→E→B 这种顺序。如果只靠 flex-direction: column，那根本做不到——因为两列仍然是独立的容器，子元素会先排完左列再排右列。

使用 display: contents 实现跨列排序

关键突破口在于解除中间容器的布局隔离。而 display: contents 这个属性，正好就是为这种场景准备的——它能让 .column 元素不再生成自己的盒模型，其子元素直接变成 .flex-container 的直属 flex 项目。这样一来，所有子元素就能统一参与 flex 排序，再配合 order 属性，想要什么顺序都能精确控制。

代码示例

举个例子，假设桌面端左列有 A、B，右列有 C、D、E，移动端希望顺序为 A→C→D→E→B。代码可以这样写：

@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
  .column {
    display: contents; /* 关键：消除列容器的布局边界 */
  }
  .boxA { order: 0; } /* 默认值，可省略 */
  .boxC { order: 1; }
  .boxD { order: 2; }
  .boxE { order: 3; }
  .boxB { order: 4; } /* 将 B 移至末尾 */
}

效果很直观：桌面端保持双列自适应（左列占 2/3，右列占 1/3），移动端自动“拆解”列容器，所有 box 变成同级元素，按 order 值重排成 A→C→D→E→B 的线性序列。整个过程完全是声明式的，不需要任何 Ja vaScript 干预。

注意事项

• display: contents 的兼容性目前已经不错了——Chrome 65+、Firefox 63+、Safari 15.4+、Edge 79+ 都支持，但 IE 不支持。如果项目必须兼容旧版 IE，那就只能降级用 JS 动态重组 DOM 了。
• 所有 .box 必须直接位于 .flex-container 的 DOM 树层级下（display: contents 保证了这一点），才能被统一排序。如果中间还有其他包裹层，就失效了。
• order 只影响视觉顺序，不影响 DOM 结构和语义顺序——这对屏幕阅读器友好。但如果需要严格语义优先，建议结合 aria-order 或直接调整 HTML 结构。

总结

一句话总结：display: contents 加上 order，就是纯 CSS 实现跨列交错排序的利器。不需要写 JS，不需要动 DOM，只需要在媒体查询里做两件事——把列容器“抹掉”，再给每个子元素排个顺序。简洁、灵活、好维护，这才是响应式重构该有的样子。