只写display: flex会出问题，因默认flex-wrap: nowrap导致窄屏下强行并排溢出；必须配合@media切换flex-direction: column，并加min-width: 0、overflow-wrap: break-word和box-sizing: border-box等细节控制。
直接用 display: flex 配合 @media 切换 flex-direction: column 就行，其他方案要么兼容性差，要么在表单或长文本场景下容易出错。
为什么只写 display: flex 会出问题
不加断点时，两栏会在窄屏上强行并排，导致文字折行、按钮错位、甚至触发横向滚动条。这不是“没生效”，而是 flex 默认行为在小屏下失控了。
- 子项若写了
width: 50%或flex-basis: 50%，窄屏下仍占半屏，留白严重 - 父容器没设
width: 100%或max-width，flex 主轴空间计算不准，flex: 1可能不生效 - 未处理长 URL 或连续无空格文本，它们会撑破容器，引发意外横向溢出
@media 断点该设多少
别硬套 max-width: 768px——iPad 竖屏就是 768px，但很多安卓平板和折叠屏设备宽度接近或略超，反而卡在临界点出错。
- 推荐用
@media (max-width: 600px)，覆盖绝大多数手机真实可用宽度 - 更鲁棒的写法是
@media (max-width: calc(100vw - 2rem))，随视口动态缩放，避开像素比陷阱 - 避免用
orientation媒体查询：横屏手机仍需单列，竖屏平板未必能撑开两栏
移动端堆叠后必须加的三样东西
光改 flex-direction 不够，堆叠完成后的溢出、间距、对齐全靠这几个细节控制。
立即学习“前端免费学习笔记（深入）”；
- 所有可能含长文本或 URL 的子项，加
min-width: 0和overflow-wrap: break-word - 父容器确保用了
box-sizing: border-box，否则padding/border会额外加宽 - 子项别写死
width，优先用flex: 0 0 auto（按内容宽）或flex: 1（均分剩余空间）
真正麻烦的从来不是“怎么切单列”，而是切完之后：首屏是否被侧边栏遮住、垂直间距是否突兀、有没有意外触发横向滚动——这些得一个个手动调，没法靠一个 @media 自动解决。
