Twitter bootstrap 如何在resize-Bootstrap上更改行中的列数

在调整窗口大小时，我需要一些帮助以动态方式更改行中的列数。例如，对于大屏幕和中屏幕，一行中应该有3列，对于小屏幕，应该有2列，对于超小屏幕，应该只有1列

像这样的

大中型

{col-1}{col-2}{col-3}

{col-4}{col-5}{col-6}

小的

{col-1}{col-2}

{col-3}{col-4}

{col-5}{col-6}

超小的也一样

我现在做的是排成一行，并在其中放入3列

<div class="row">
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 1
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 2
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 3
    </div>
</div>
<div class="row">
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 4
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 5
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 6
    </div>
</div>

这里是第1列的一些内容
这里是第2栏的一些内容
这里是第3栏的一些内容
这里是第4栏的一些内容
这里是第5栏的一些内容
这里是第6栏的一些内容

但使用这个技巧，在小屏幕上它一行显示2列，下一行只显示1列

{col-1}{col-2}

{col-3}

{col-4}{col-5}

{col-6}

谁能帮我把这个修好吗

---

感谢

用于引导的响应网格视图

 <div class="container">
      <div class="row">
         <div class="col-lg-4 col-sm-6 col-xs-12"></div>
         <div class="col-lg-4 col-sm-6 col-xs-12"></div>
         <div class="col-lg-4 col-sm-12 col-xs-12"></div>
      </div>
 </div>

---

这是一个很好的例子，说明何时使用引导功能

将所有列放在1

行中

这里是第1列的一些内容
这里是第2栏的一些内容
这里是第3栏的一些内容
这里是第4栏的一些内容
这里是第5栏的一些内容
这里是第6栏的一些内容

---

感谢您的回复，在编辑版本中添加了我的代码。银行：这很有效：）我不知道我们可以在一行中添加超过12列。谢谢

<div class="row">
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 1
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 2
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 3
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 4
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 5
    </div>
    <div class="col-lg-4 col-sm-6 col-xs-12">
    Some content here for column 6
    </div>
</div>