Bootstrap 3中如何实现视口缩小时4/4/4列改为两行显示？

问题说明 #

使用Bootstrap 3时，有一个包含三个.col-md-4的行，默认在视口宽度小于992px时会堆叠成三行。需要修改为：在小屏幕下第一行显示一个.col-md-4，第二行两个.col-md-4并排，效果如下：

<-------  .col-md-4  ------->
<-- .col-md-4 | .col-md-4 -->

解决方案 #

利用Bootstrap 3的响应式网格类，给后两个列添加col-sm-6类（针对≥768px的屏幕），同时保留原有的col-md-4类（针对≥992px的屏幕）。这样在屏幕宽度<992px时，col-sm-6会生效，让后两个列各占一行的50%宽度，实现并排；而在≥992px时，依然保持三个.col-md-4均分一行的效果。

修改后的完整代码 #

CSS（保持原有样式不变）

.row {
  margin-bottom: 20px;
}

.row .row {
  margin-top: 10px;
  margin-bottom: 0;
}

[class*="col-"] {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86, 61, 124, .2);
}

hr {
  margin-top: 40px;
  margin-bottom: 40px;
}

HTML（关键修改后两个列的类）

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <!-- 原有4/8分栏行 -->
  <div class="row">
    <div class="col-md-4">
      .col-md-4
    </div>
    
    <div class="col-md-8">
      .col-md-8
    </div>
  </div>

  <!-- 修改后的4/4/4分栏行 -->
  <div class="row">
    <div class="col-md-4">
      .col-md-4
    </div>
    
    <div class="col-md-4 col-sm-6">
      .col-md-4 + .col-sm-6
    </div>
    
    <div class="col-md-4 col-sm-6">
      .col-md-4 + .col-sm-6
    </div>
  </div>
</div>

原理说明 #

• Bootstrap 3的网格系统是移动优先，当屏幕宽度小于md的阈值992px时，sm类的样式会覆盖md类在小屏幕下的默认堆叠行为。
• col-sm-6表示在≥768px的屏幕上占6个网格列（即50%宽度），所以后两个列在小屏幕下会各占一半，实现并排；而在≥992px的屏幕上，col-md-4生效，三个列各占1/3宽度，保持原有布局。

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