Boostrap从一个网格大小的col更改为另一个

Question

使用引导程序，我有这个

<div class="col-sm-4">
  <p>something</p>
</div>

但是我希望当视口宽度小于1200px时将其设为“ col-sm-6”。

是否有任何方法可以仅用css将类“ col-sm-6”替换为“ col-sm-6”类而无需任何脚本？

我也不想为此而修改引导程序中的所有变量，只是为了获得尽可能简洁明了的代码。

对不起，土豆英语，谢谢您的帮助！

Answer 1

您不能仅使用CSS来更改类，但是有2个选项： 1）媒体查询：

@media only screen and (max-width: 1200px) {
  //your css here
}

2）引导程序col大小类，每个类反映不同的屏幕宽度：

<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
  <p>something</p>
</div>

您可以在此处找到更多有关Bootstrap Grid

的信息