Bootstrap栅格系统如何实现1行2列在小屏幕下切换为2行布局

调整方案 #

Bootstrap 4的栅格类中，md前缀对应的断点是≥768px，小于这个宽度的小屏设备会默认应用col-12属性（占满整行宽度），你原本的代码逻辑已经能实现「中大屏左6右5、右栏上下分区块2和3，小屏三个区块依次全宽堆叠」的效果，补充几个细节优化即可：

1. 所有栅格结构必须包裹在container或container-fluid容器中，避免默认负margin导致横向滚动条
2. Bootstrap栅格总宽度为12列，你原有代码的col-md-6+col-md-5总宽度为11，添加offset-md-1可以补满12列，让布局左右对齐更美观
3. 添加align-items-stretch和h-100类可以让左侧区块1的高度自动匹配右侧2+3的总高度，不会出现高度差

如果需要小屏状态下2和3并排各占半行，只需要将右侧内部两个div的类从col-md-12修改为col-6 col-md-12即可，col-6会在小于768px的设备上生效，让两个区块各占一半宽度并排展示。

完整优化代码 #

.row > div { border: 1px solid black }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid mt-3">
  <div class='row align-items-stretch'>
    <div class="col-md-6">1</div>
    <div class="col-md-5 offset-md-1">
      <div class='row h-100'>
        <div class="col-md-12">2</div>
        <div class="col-md-12">3</div>
      </div>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Gudmundur