Bootstrap 4.3 本身严格遵循移动优先（mobile-first）设计原则，但若页面缺少 标签，浏览器将默认以桌面视口渲染，导致 .col-6 等移动端断点样式不生效、布局无法堆叠。
bootstrap 4.3 本身严格遵循移动优先（mobile-first）设计原则，但若页面缺少 `` 标签，浏览器将默认以桌面视口渲染，导致 `.col-6` 等移动端断点样式不生效、布局无法堆叠。
在 Bootstrap 4.x 中，“移动优先”并非仅指 CSS 类名顺序，而是一套完整的响应式策略：所有基础栅格类（如 .col-6、.col）默认作用于 xs（.col-md-6）则在满足最小视口宽度（≥768px）时才覆盖低断点样式。然而，这一机制高度依赖浏览器正确识别设备视口尺寸。
你遇到的问题——.col-6 未在手机上生效、按钮始终按 .col-md 行为展开、无法垂直堆叠——根本原因极大概率是：HTML 中缺失 viewport 元标签。
✅ 正确做法：立即添加 viewport 元标签
在 中 样式表之前，插入以下标准声明：
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
? 为什么这至关重要？
width=device-width：将页面宽度设为设备屏幕宽度（而非默认的 980px 桌面视口）；initial-scale=1：确保页面以 1:1 比例缩放，避免自动缩放导致断点误判；shrink-to-fit=no（iOS Safari 旧版兼容）：防止 Safari 自动压缩内容以适应视口。
⚠️ 其他潜在干扰因素（排查建议）
虽然 viewport 是首要原因，也请同步检查：
-
Bootstrap 版本完整性：你使用的是
4.3.1CDN（正确），但需确认未被其他 CSS 覆盖.col-*的flex-basis或max-width； -
父容器限制：确保
.col-6所在的.row未被固定宽度或overflow: hidden等样式破坏弹性布局； -
类名冲突：你的代码中存在 —— 注意：
.col-md是无效类（Bootstrap 4 中应为.col-md-6或.col-md-auto）。当前写法会导致.col-md解析失败，退回到.col-6，但若 viewport 缺失，.col-6本身也无法触发。✅ 修正为：.col-6
