在响应式设计中，经常会遇到这样的需求：桌面端布局为左右两列，每列都是一个独立的 Flex 容器，内部包含多个元素。当切换到移动端时，希望这两列能合并成一个单列流，但顺序并非简单的按列依次堆叠（如 A→B→C→D→E），而是需要实现跨列交错排列，比如 A→C→D→E→B。仅靠 flex-direction: column 无法实现，因为两列仍是独立的容器，子元素会先完成左列再进入右列。
关键突破口在于解除中间容器的布局隔离。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 的线性序列。整个过程纯声明式，无需任何 JavaScript 干预。
有几个注意事项需要留意：
display: contents的兼容性已相当不错——Chrome 65+、Firefox 63+、Safari 15.4+、Edge 79+ 均支持，但 IE 不支持。如果项目需要兼容旧版 IE，则只能降级使用 JavaScript 动态重组 DOM。- 所有 .box 必须直接位于 .flex-container 的 DOM 树层级下（
display: contents确保了这一点），才能被统一排序。如果中间存在其他包裹层，则此方法失效。 order仅影响视觉顺序，不影响 DOM 结构和语义顺序——这对屏幕阅读器友好。但如果需要严格遵循语义优先级，建议结合aria-order或直接调整 HTML 结构。
一句话总结：display: contents 配合 order，是纯 CSS 实现跨列交错排序的利器。无需编写 JavaScript，无需操作 DOM，只需在媒体查询中完成两件事——将列容器“抹除”，并为每个子元素分配顺序。简洁、灵活、易于维护，这才是响应式重构应有的姿态。
