直接用container-fluid包裹+d-flex flex-sm-column就能实现小屏垂直堆叠，无需row/col网格；col-sm-4在小屏未垂直是因为row仍保持flex-direction:row且父容器缺失container导致栅格失效，而d-flex flex-sm-column可精准控制主轴方向，避免高度不一致与错位。
直接用 container-fluid 包裹 + d-flex flex-sm-column 就能实现小屏垂直堆叠，不需要死磕 row/col 网格——后者在 Footer 场景下反而容易因高度不一致、内边距干扰导致错位。
为什么 col-sm-4 在小屏没垂直？
常见现象是加了 col-sm-4 后，手机上三栏挤成窄条、文字折行混乱，甚至横向溢出。根本原因不是类名写错，而是：
-
row在小屏仍维持display: flex; flex-direction: row，列宽虽为 100%，但父容器没切断主轴方向 - 漏掉
container-fluid或container，导致row的负 margin 外溢，子项宽度计算失效 - 在
col内部用了flex、width或float，覆盖了栅格的自动换行逻辑
d-flex flex-sm-column 怎么用才不翻车？
这是 Bootstrap 5 原生支持的语义化方案，比网格更轻量、更可控：
- 外层
footer直接加class="d-flex flex-sm-column"，小屏（≥576px）自动切为 column，大屏默认 row - 左右区块（如 logo / 版权）用
justify-content-between对齐，但小屏必须去掉它——flex-sm-column下justify-content-between会撑开上下间距，造成意外空白 - 中间多栏导航单独抽成一个
div，加d-flex flex-sm-column，避免和左右区块耦合 - 每栏内部统一用
d-flex flex-column gap-2控制子项间距，比一堆mb-2更稳定
小屏堆叠后内容错位、图标飞出去怎么办？
这不是断点没生效，而是元素脱离了 flex 流控制：
- Font Awesome 图标别用
float或position: absolute，改用d-inline-flex align-items-center gap-1和文字同行 - 长地址或链接文本加
text-wrap，否则小屏会横向溢出容器 - 表单控件（
input、button）必须加w-100，否则默认 inline 宽度在 flex column 下不可控 - 版权行必须脱离主 flex 容器，单独放到底部：
<div class="mt-auto pt-3 text-center">© 2026</div>
真正难调的不是“怎么堆叠”，而是各栏内容高度差异带来的视觉断裂——比如左边导航只有 3 行，右边联系方式有 8 行，小屏堆叠后会出现大片空白。这时候靠 flex-grow-1 或 min-height 都不如直接用 gap-3 + text-start 统一节奏来得实在。
