基础两列布局需满足断点匹配、外层容器规范、align-items-stretch等高、嵌套必用.row、移动端顺序用flex-column-reverse+flex-md-row。
用 .row + .col- 类组合是基础，但必须满足断点匹配
bootstrap 的两列左右对开不是“写两个 .col-6 就完事”。关键看设备宽度是否触发对应断点类。比如 .col-md-6 只在 ≥768px（md 断点）时生效；小屏下它会退化为默认的 100% 宽度，变成上下堆叠——这不是 bug，是响应式设计本意。
常见错误现象：缩放浏览器窗口时，两列突然“掉下来”变成一列，还误以为是 CSS 冲突。
- 确认你用了正确的断点前缀：
.col-sm-6（≥576px）、.col-md-6（≥768px）、.col-lg-6（≥992px）等，按实际目标设备选 - 别混用旧版前缀（如
.col-xs-6）——Bootstrap 4+ 已移除xs前缀，不加前缀即默认行为（.col-6= 所有尺寸） - 确保外层有
.container或.container-fluid，否则.row的负 margin 会破坏布局
align-items-stretch 是等高两列的必要条件，不是可选项
两列内容高度不同，却想视觉上“齐平”，只靠 .col-6 不够。Bootstrap 的 .row 默认是 display: flex，但 align-items: normal，不会拉伸子项。
直接后果：左边一段文字，右边一张大图，右边把整行撑高了，左边却只贴着顶部，留出大片空白。
- 必须显式添加
align-items-stretch到.row上（Bootstrap 4/5 都支持） - 删掉列内部的
height: 100%、min-height等手动设高样式，它们会干扰 flex 拉伸逻辑 - 真正需要等高的，是列内部的容器（比如
.card），给它加h-100，而不是给.col-6自己加
移动端想图片在上、文字在下，桌面端左右并排？用 d-flex + flex-column-reverse + flex-md-row
这不是靠改 HTML 顺序或 JS 重排，而是用 Bootstrap 5 的 Flex 工具类声明式切换。核心是控制渲染顺序，而非隐藏/显示。
典型错误：试图用 order 手动调序，或在小屏用 display: none 控制显隐——既冗余又难维护。
- 父容器用
d-flex flex-column-reverse flex-md-row：移动端垂直反向（图片后写却显示在上），桌面端恢复水平流 - 两个子块都加
col-md-6：桌面端各占半宽；移动端因flex-column生效，col-md-6自动转为flex: 1，等宽自适应 - 避免在子块内再套
.row却忘记重置对齐方式——子.row不继承父级align-items
嵌套两列时，漏掉中间的 .row 是最隐蔽的错位原因
比如你想在左侧 .col-8 里再分两小列，直接写 <div class="col-6">A</div>
<div class="col-6">B</div> —— 这会导致 A/B 宽度错乱、换行异常，甚至整行塌陷。
因为 Bootstrap 的栅格逻辑要求：所有 .col-* 必须直属于 .row，而 .row 必须属于 .container 或另一个 .col-*。
- 正确结构是：
<div class="col-8"><div class="row"> <div class="col-6">A</div> <div class="col-6">B</div> </div></div> - 子
.row内的列宽总和应为 12（如.col-6+.col-6），否则会触发换行 - 如果嵌套后高度不一致，优先检查是否漏了
align-items-stretch，或子.row内部用了height干扰 flex
真正麻烦的不是写两列，而是当其中一列含图片、卡片、表单或自定义 padding 时，box-sizing、object-fit、margin 折叠这些细节会逐层放大偏差。调试时先关掉所有自定义 CSS，只留 Bootstrap 类，确认基础结构成立，再一层层加回来。
