viewport meta标签缺失或拼写错误会导致手机端响应式失效，必须置于<head>中且name="viewport"、content属性零容错；多标签共存会覆盖；Bootstrap CSS加载失败、版本不匹配、栅格结构不规范（如col-未嵌套于.row）、order-类误用及父容器宽度限制均会破坏断点行为。
viewport meta 标签缺失或拼写错误
手机端所有响应式行为失效，第一反应不是代码写错，而是 <meta name="viewport"> 根本没生效。它必须出现在 <head> 里，且拼写零容错：name="viewport" 不能写成 viewpoint，content="width=device-width, initial-scale=1" 中的 initial-scale 也不能漏字母或写成 intial-scale。
常见陷阱：
-
<meta>被误放在<body>内 —— 浏览器直接忽略 - 写了
width=1200或user-scalable=no等干扰项，导致断点匹配失败 - 多个
<meta name="viewport">标签共存，后加载的覆盖前一个
Bootstrap CSS 文件未正确加载或版本不匹配
用浏览器开发者工具的 Network 面板过滤 bootstrap.min.css，看状态码是不是 200。404 意味着路径错了；304 是缓存命中但内容可能已过期；200 但响应体为空，说明 CDN 返回了错误页。
更隐蔽的问题是版本混用：
- 用了 Bootstrap 5 的
col-sm-6，但加载的是 Bootstrap 4 的 CSS —— 断点阈值不同（576px vs 768px），sm在手机上根本不会触发 - CSS 和 JS 版本不一致，比如 CSS 是 v5.3.8，JS 却是 v5.1.0，部分工具类（如
order-sm-*）可能缺失或行为异常 - 本地文件路径写错，例如
css/bootstrap.css实际在dist/css/下
栅格结构不规范导致断点类被忽略
Bootstrap 的 col-* 类只在 .row 的直接子元素上生效。如果把 col-md-6 直接套在 <div> 外层，而这个 <div> 并不在 .row 里，那它就是普通块级元素，md 断点完全不起作用。
正确结构必须是：
<div class="container">
<div class="row">
<div class="col-md-6">...</div>
<div class="col-md-6">...</div>
</div>
</div>另外，别只写 col-lg-4 —— 这意味着在 lg 及以上才生效，md、sm、xs 下会退化为 display: block，占满整行。应写成 class="col-12 col-sm-6 col-lg-4"，逐级定义。
order-* 类在移动端不生效的典型误用
order-sm-1 不是“只在小屏生效”，而是“在 sm 及以上断点生效”。如果你希望图片在手机上排第一、桌面排第二，得写 order-0 order-md-2：前者让手机保持默认顺序（最小值最前），后者让桌面从 md 开始重排。
容易踩的坑：
- 把
order-sm-*加在.col-*的子元素上（比如<div class="col-sm-6"><div class="order-sm-1">）——order只对 flex 容器的直接子项有效，.row的直接子项是.col-*，不是它里面的div - 用了
float-start或position: absolute，导致元素脱离文档流，flex 排序失效 - 自定义 CSS 重写了
.row { display: block }，直接废掉整个 flex 布局逻辑
真正卡住的地方往往不是“怎么写”，而是“谁在控制宽度”——比如父容器用了 width: 1200px，再好的 col-sm-6 也挤不进手机屏幕。检查每一层包裹元素的宽度声明，比反复调 class 更有效。
