最稳解法是用 flex 布局配合 @media 媒体查询实现响应式堆叠，兼容性好、语义清晰；关键在合理设置断点（如 max-width: 600px）并切换 flex-direction: column，避免小屏强行并列导致折行溢出。
用 flex 布局 + @media 是最稳解法
直接上结论：不用 float，不用 inline-block，就用 display: flex 配合媒体查询。它兼容性好（Safari 9+、Chrome 29+、Firefox 28+），语义清晰，且能精准控制堆叠时机。
常见错误是只写 flex 不加断点，结果在小屏上两栏强行挤在一起，文字折行混乱甚至溢出。关键在于「何时切单列」——通常以 max-width: 768px 为临界点（iPad 竖屏宽度），但更推荐用 max-width: 600px 或基于视口单位的 max-width: calc(100vw - 2rem)，避免依赖固定设备尺寸。
- 父容器设
display: flex，子项默认横向排列 - 移动端断点内，把父容器改成
flex-direction: column - 避免给子项写死
width，改用flex: 1或flex-basis控制比例
grid 布局适合内容结构固定场景
如果左右栏内容高度差异大（比如左栏是导航、右栏是长文章），grid 比 flex 更容易对齐顶部，且无需额外 hack。
注意：不要直接写 grid-template-columns: 1fr 1fr 就完事。必须配合 @media 把它改成 grid-template-columns: 1fr，否则小屏下仍强行分两列。
立即学习“前端免费学习笔记（深入）”；
- 用
grid-template-areas可读性更高，例如："sidebar main"→"main" "sidebar" - 慎用
grid-auto-flow: column，它在响应式切换时容易错乱顺序 - 部分安卓 WebView（尤其 Android 4.4）不支持
grid，需确认目标用户环境
别碰 float 和 inline-block 响应式
这两者在现代响应式中已属反模式。典型症状：小屏下两栏没堆叠、间隙莫名变大、清除浮动后父容器高度塌陷、vertical-align 失效引发基线错位。
有人试图用 float: none + width: 100% 强切单列，但会丢失弹性行为，且无法优雅处理等高、间距、对齐等需求。
-
float在@media中重置后，需额外加clear: both才能防止残留浮动影响后续元素 -
inline-block的空白符问题在响应式下更难调试，font-size: 0这类 hack 容易误伤文本内容 - 二者都不支持
gap，而flex和grid的gap在移动端能统一控制间距
移动端堆叠后留白和滚动体验要手动调
自动堆叠只是第一步。真正影响体验的是堆叠后的垂直间距、首屏可视区域是否被过长侧边栏遮挡、以及是否意外触发横向滚动。
最容易被忽略的是：父容器未设 min-width: 0，导致内部文本超长时撑破布局；或者 overflow-x: hidden 加在了错误层级，掩盖了真实溢出源。
- 给所有可能溢出的子项加
min-width: 0（尤其含长单词或 URL 的文本块） - 用
scroll-margin-top配合id锚点跳转，避免标题被 sticky 导航遮住 - 检查是否有未重置的
margin或padding，比如桌面端写的margin-right: 2rem到移动端变成右侧大片空白
