必须写col-12 col-sm-4才能确保小屏垂直堆叠，否则因缺失xs断点定义导致列挤在一起；常见失效原因包括父容器缺container或row、类名顺序错误（col-sm-4写在col-12前）、或手动覆盖display/flex-direction。
直接用 container-fluid 包裹 row，子项写 col-12 col-sm-4，不是只写 col-sm-4——否则小屏下仍会试图横向排列，文字挤成一团或换行错乱。
基于“创意扇形排列卡片画廊”制作的前端特效源码，包含扇形卡片、旋转展开、层级聚焦、键盘切换，打开 index.html 即可直接查看效果，可替换标题、颜色和图形元素复用。 下载包已经整理好特效舞台、样式变量、动画规则和必要脚本，适合用于学习当前效果的实现方式，也方便替换文字、颜色、图形或图片后直接复用。
为什么加了 col-sm-4 还是不垂直堆叠？
最常见原因是结构缺失或类名顺序错误：
- 父容器没套 container-fluid 或 container，导致 row 的负 margin 外溢，栅格计算失效
- 漏写了 row 类，col 必须在 row 内才能触发 flex 布局和断点响应
- 类名写成 col-sm-4 col-12（小断点写在后面），被 Bootstrap 从左到右匹配时直接用了 col-sm-4，col-12 被忽略
- 给 row 或 col 手动加了 display: flex、width 或 flex-direction: row，覆盖了响应式逻辑
用 d-flex + flex-sm-column 替代 col-* 更可控
当 Footer 栏目语义独立（如“关于我们”“联系方式”“法律条款”），且内容高度差异大时，col 容易因等高拉伸造成视觉空洞。此时改用 Flex 更自然：
- 外层用 d-flex flex-sm-column，小屏自动垂直，大屏默认水平
- 子项不设宽度，靠内容自适应；若需等宽，加 flex-grow-1
- 避免同时加 justify-content-between 和 flex-sm-column：垂直主轴下 between 会撑开上下间距，产生意外空白
- 中间多栏部分可单独抽离，加 d-flex flex-sm-column gap-2，这样它自己响应，不影响左右 logo/版权区块
各栏内部怎么排才不崩？
光解决“几栏并排”不够，每栏内内容流也得稳住：
- 每栏内部用 d-flex flex-column gap-2，比一堆 mb-2 更可靠，避免高度不一致导致背景断裂
- 表单控件（input、button）统一加 w-100，防小屏宽度失控
- 链接列表保留 ul 结构，但加 ps-0 mb-0 和 fw-normal，删掉默认左 padding，禁用粗体
- 地址、长链接等易溢出内容，单独加 text-wrap
- 版权行必须脱离 row 或 flex 容器，用 mt-auto pt-3 text-center 粘底，否则会被拉进堆叠流里
真正容易被忽略的，是各栏内部元素高度差异带来的“空洞感”——不是 CSS 没生效，而是你没意识到：小屏堆叠后，原本对齐的底部，在高度不一致时会自然拉开距离，形成大片空白。这时候靠调整外层栅格没用，得从每栏内部的流控制入手。
