响应式断点与列宽
响应式栅格的灵魂是断点前缀。Bootstrap 定义 6 个断点：col（所有宽度，即手机优先）、col-sm(≥576px)、col-md(≥768px)、col-lg(≥992px)、col-xl(≥1200px)、col-xxl(≥1400px)。前缀的含义是「大于等于该宽度时生效」。
标准写法是给同一个 col 叠加多个断点类：col-12 col-md-6 col-lg-3——手机上占满 12 列（独占一行）、平板占 6 列（一行两个）、桌面占 3 列（一行四个）。因为断点是「大于等于」，小屏的设置会自动延续到大屏，所以只需写「发生变化」的那几个断点。
理解顺序的关键：类从上到下按屏幕从小到大排列，先写手机端行为，再逐级覆盖，这就是移动优先（Mobile First）。做卡片网格时，这一句组合就能实现经典的「手机一列 → 平板两列 → 桌面四列」布局。
本节要点断点 sm/md/lg/xl/xxl 表示「≥该宽度生效」；col-12 col-md-6 col-lg-3 = 手机 1 列/平板 2 列/桌面 4 列；小屏设置自动延续到大屏，只写变化的断点。
代码
<div class="container">
<!-- 一个类组合实现三档布局 -->
<div class="row g-4">
<!-- 手机(默认)：独占一行
≥768px：占 6 列，一行两个
≥992px：占 3 列，一行四个 -->
<div class="col-12 col-md-6 col-lg-3">卡片 1</div>
<div class="col-12 col-md-6 col-lg-3">卡片 2</div>
<div class="col-12 col-md-6 col-lg-3">卡片 3</div>
<div class="col-12 col-md-6 col-lg-3">卡片 4</div>
</div>
<!-- 常见套路：桌面侧边栏布局 -->
<div class="row">
<div class="col-12 col-lg-3">侧边栏（手机在上）</div>
<div class="col-12 col-lg-9">主内容区</div>
</div>
<!-- 断点速记：
sm≥576 md≥768 lg≥992 xl≥1200 xxl≥1400
语义：移动优先，"≥"生效，从小屏往大屏覆盖 -->📚 推荐阅读
来自万象云档的免费在线书籍，点击封面直接阅读