本文详解如何通过 Flexbox 的 order 属性与媒体查询，精准控制左右两栏在移动端的堆叠顺序，避免内容重叠或意外消失，确保左侧栏始终优先显示、右侧栏自然下移。
本文详解如何通过 flexbox 的 `order` 属性与媒体查询，精准控制左右两栏在移动端的堆叠顺序，避免内容重叠或意外消失，确保左侧栏始终优先显示、右侧栏自然下移。
在响应式网页开发中，将原本并排的左右两栏（如 .left-side 和 .right-side）在小屏幕上改为垂直堆叠是常见需求。但若仅简单设置 flex-direction: column，却未统一管理子元素的渲染顺序与尺寸约束，极易导致布局错乱——例如左侧内容被遮盖、突然跳转甚至完全消失。根本原因在于：Flex 项的默认 order: 0 无法保证语义顺序，且父容器未清除浮动/绝对定位干扰（如 .divider-line 的 position: absolute）。
✅ 正确实现方案（基于 Flexbox）
核心思路是：在小屏断点（如 max-width: 600px）下，将 .row 设为 flex-direction: column，再通过 order 显式声明渲染优先级，并重置宽度以消除栅格类（如 col-sm-4/col-sm-8）的固定宽度干扰：
@media (max-width: 600px) {
.row {
flex-direction: column;
}
/* 关键：强制 100% 宽度，覆盖原有栅格类 */
.left-side,
.right-side {
width: 100%;
}
/* 确保左侧栏在上，右侧栏在下 */
.left-side {
order: 1;
}
.right-side {
order: 2;
margin-top: 20px; /* 增加间距，提升可读性 */
}
/* 隐藏不适应小屏的元素（如宽幅 logo） */
.logo {
display: none;
}
/* 移除绝对定位的分隔线（否则会覆盖内容） */
.divider-line {
display: none;
}
}
⚠️ 必须注意的关键点
-
清除绝对定位干扰：原代码中
.divider-line使用position: absolute+left: 95%，在小屏下会脱离文档流并可能遮挡.left-side。务必在媒体查询中设为display: none。 -
覆盖栅格类样式：
col-sm-4/col-sm-8等框架类通常设置width，必须在媒体查询中用width: 100%强制重置，否则 Flex 子项无法占满整行。 -
order值需成对设置：仅给.right-side设order: -1或2不够可靠，应同时为.left-side明确设order: 1，避免浏览器解析歧义。 -
父容器需启用 Flex：确保
.row在所有断点下均为display: flex（当前代码已满足），否则order和flex-direction无效。
? 进阶建议
- 若使用 Bootstrap 等框架，推荐直接采用其响应式工具类（如
d-flex flex-column+d-sm-flex），减少自定义 CSS 冲突。 - 对于复杂嵌套，可添加
align-items: stretch防止子项高度塌陷。 - 测试时使用 Chrome DevTools 的设备模拟器，重点关注
600px临界点前后布局变化，验证无闪动或重绘异常。
通过以上调整，左侧栏将稳定置于顶部，右侧栏紧随其后，间距清晰、结构可控，真正实现语义化、无障碍的响应式堆叠。
