本文详解如何通过 Flexbox 的 order 属性与媒体查询，让左右并排的两栏布局在移动端自动变为上下堆叠，并确保左侧内容始终在上、右侧内容紧随其后，彻底解决遮挡、错位和消失等常见响应式问题。
本文详解如何通过 flexbox 的 `order` 属性与媒体查询，让左右并排的两栏布局在移动端自动变为上下堆叠，并确保左侧内容始终在上、右侧内容紧随其后，彻底解决遮挡、错位和消失等常见响应式问题。
在构建响应式网页时，将桌面端的左右双栏（如 .left-side 和 .right-side）在小屏幕下优雅地转换为垂直堆叠布局，是前端开发中的高频需求。你遇到的“左侧被覆盖→短暂错位→最终消失”现象，根本原因在于：未对父容器 .row 的 flex 方向进行统一重置，且子元素的 order 值未配合 flex-direction: column 正确生效。
关键修复逻辑如下：
✅ 父容器需切换为 column 布局
仅设置子元素 flex-direction: column 是无效的——flex-direction 是容器属性，必须作用于 .row（即 flex 容器本身）：
@media (max-width: 600px) {
.row {
flex-direction: column; /* ✅ 必须在此处设置 */
}
}
❌ 错误写法（原问题中）：
.left-side { flex-direction: column; } /* ❌ left-side 不是 flex 容器，此声明无效 */
✅ 使用 order 控制堆叠顺序（而非依赖默认流）
在 flex-direction: column 下，order 决定元素在垂直轴上的排列次序。为确保左侧在上、右侧在下，应显式指定：
@media (max-width: 600px) {
.left-side { order: 1; width: 100%; }
.right-side { order: 2; width: 100%; margin-top: 20px; }
}
⚠️ 注意：order 的默认值为 0，若不显式设置，.left-side 和 .right-side 将按 HTML 源顺序排列（即 left 先、right 后），看似正确，但一旦存在其他 flex 项目或 CSS 重置，极易失效。显式声明 order 是健壮性保障。
✅ 移除干扰性绝对定位
原样式中 .divider-line 使用了 position: absolute; left: 95%，这在小屏下会导致定位异常甚至覆盖内容。建议在移动端直接隐藏：
@media (max-width: 600px) {
.divider-line { display: none; }
}
✅ 补充健壮性优化
- 移除可能引起宽度冲突的
col-sm-*类（如col-sm-4/col-sm-8），它们属于栅格系统（如 Bootstrap），与自定义 Flex 布局混用易引发冲突； - 为
.left-side和.right-side添加box-sizing: border-box，避免 padding/margin 导致宽度溢出； - 对
.logo等非核心内容，在小屏下设为display: none可提升加载性能与可读性。
完整推荐媒体查询代码如下：
@media (max-width: 600px) {
.row {
flex-direction: column;
}
.left-side,
.right-side {
width: 100%;
box-sizing: border-box;
}
.left-side { order: 1; }
.right-side { order: 2; margin-top: 20px; }
.divider-line { display: none; }
.logo { display: none; }
}
? 总结：响应式双栏转单栏的核心三要素是——① 在父容器上设置 flex-direction: column；② 用 order 显式控制堆叠优先级；③ 清理绝对定位、栅格类等干扰项。遵循此模式，即可稳定实现“小屏左上右下”的预期布局，杜绝内容消失与视觉错乱。
