当然没问题！Bootstrap 3.3.6的栅格系统天生就是为这种响应式列宽切换设计的，操作起来特别直观。

首先得明确Bootstrap 3的四个栅格断点：

• xs：超小屏幕（<768px，比如手机）
• sm：小屏幕（≥768px，比如平板）
• md：中屏幕（≥992px，比如笔记本）
• lg：大屏幕（≥1200px，比如桌面显示器）

它的核心逻辑是移动优先——也就是说，小屏幕的类会自动向上兼容到更大的屏幕，除非你给更大的断点指定了不同的类。

实现列宽切换的方法 #

你只需要在同一个元素上添加多个不同断点的列类，Bootstrap就会根据当前屏幕尺寸自动应用对应的样式。

举几个常见场景的例子：

场景1：小屏幕和中屏幕都用3列

其实因为移动优先的特性，如果你给了col-sm-3，它会自动应用在sm、md、lg所有更大的屏幕上，所以如果中屏幕和小屏幕列宽一致，只需要写col-sm-3就够了。不过如果你想明确指定每个断点的样式，也可以同时写两个类：

<div class="row">
  <div class="col-sm-3 col-md-3">
    小屏幕及以上都占3列（1/4宽度）
  </div>
</div>

场景2：小屏幕占6列，中屏幕切换为3列

这是更常见的响应式需求，代码如下：

<div class="row">
  <div class="col-sm-6 col-md-3">
    小屏幕（≥768px）占6列（半宽），中屏幕及以上（≥992px）切换为3列（1/4宽）
  </div>
</div>

场景3：超小屏幕全屏，小屏幕半宽，中屏幕1/4宽

如果要覆盖所有断点的样式，可以这样写：

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-3">
    超小屏幕（<768px）全屏显示，小屏幕半宽，中屏幕及以上1/4宽
  </div>
</div>

关键注意点 #

• 所有列类都要放在row容器里面，这是Bootstrap栅格的基本结构要求
• 每个断点的列数总和不要超过12，否则会自动换行
• 如果某个断点没有指定列类，Bootstrap会默认让该元素在这个断点下占100%宽度（全屏）

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