如何在小屏幕下将右侧栏自动移至左侧栏下方（响应式布局实现）

本文详解如何通过 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; }}

补充健壮性优化

1. 移除可能引起宽度冲突的 col-sm-* 类（如 col-sm-4/col-sm-8），它们属于栅格系统（如 Bootstrap），与自定义 Flex 布局混用易引发冲突；
2. 为 .left-side 和 .right-side 添加 box-sizing: border-box，避免 padding/margin 导致宽度溢出；
3. 对 .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 显式控制堆叠优先级；③ 清理绝对定位、栅格类等干扰项。遵循此模式，即可稳定实现“小屏左上右下”的预期布局，杜绝内容消失与视觉错乱。