移动端分栏堆叠失效的根本原因是 viewport 缺失、父容器未设 flex-wrap: wrap、子项使用固定宽或百分比硬编码；应改用 flex: 1 或 grid 配媒体查询，配合 max-width 和响应式 gap、line-height 等。
移动端分栏堆叠失效，flex 为什么没反应
常见现象是桌面端三栏正常，手机一缩就挤成一团甚至溢出屏幕——根本原因往往是父容器没设 flex-wrap: wrap，或者子项写了死宽度（比如 width: 33.33%）卡死了响应逻辑。
- 用
display: flex的容器必须显式加flex-wrap: wrap，否则子项宁可缩小或换行也不堆叠 - 子项避免固定像素宽或百分比硬编码，优先用
flex: 1或flex: 0 1 auto - 别依赖
min-width拖住堆叠时机；真要控制断点，用媒体查询配flex-direction: column
用 grid 实现“桌面三栏 → 移动单列”的最简写法
grid 比 flex 更适合这种明确的布局切换，关键是用 grid-template-columns 配 @media，而不是靠 grid-auto-flow 猜。
- 桌面端：设
grid-template-columns: repeat(3, 1fr) - 移动端：媒体查询里改成
grid-template-columns: 1fr，一行一列自然堆叠 - 注意别漏掉
gap的响应式重置——比如桌面用gap: 2rem，移动端可减为gap: 1rem - 如果内容高度不均，加
align-items: start防止底部错位
max-width 和 viewport 设置不对，堆叠永远不触发
再好的 css 布局，如果页面没告诉浏览器“我支持响应式”，它就按默认 980px 宽渲染，媒体查询压根不执行。
- HTML
里必须有：<meta name="viewport" content="width=device-width, initial-scale=1"> - 页脚容器本身别写死
width: 1200px这类值，改用max-width: 1200px+margin: 0 auto - 检查是否意外继承了上级的
overflow-x: hidden，这会让横向滚动消失，但实际内容已溢出
页脚文字/图标在堆叠后错位、重叠或丢失
堆叠只是改变排列顺序，不自动处理内部元素流式适配。尤其当用了绝对定位、浮动或固定高度时，错位几乎是必然的。
立即学习“前端免费学习笔记（深入）”；
- 删掉页脚内所有
Float，用flex或grid重构内部结构 - 图标用
em或rem设尺寸，避免px在小屏下糊成一团 - 文字行高、字间距也要响应式：比如
line-height: 1.4比line-height: 24px更可靠 - 用
justify-content: center替代text-align: center控制水平居中，兼容性更稳
事情说清了就结束。真正卡住的往往不是布局语法，而是 viewport 元素漏了、父容器 width 写死了、或者某处 position: absolute 在堆叠后彻底脱离文档流。