Css TwitterBootstrap 3减少调整大小时行中的列数

在不同设备上查看时，减少行中列数的最佳方法是什么

我的页面在桌面上有3列，但我想在平板电脑上减少到2列。我的第三专栏怎么办

<div class="container">
<div class="row">
 <!-- column one -->
 <div class="col-lg-6 col-md-6 col-sm-8 col-xs-12>
  <div>Content One</div>
 </div>

 <!-- column two -->
 <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12>
  <div>Content Two</div>
 </div>

 <!-- column three -->
 <div class="col-lg-3 col-md-3 col-sm-?? col-xs-12>
  <div>Content Three</div>
 </div>

 </div>
 </div>

您可以将第3列包装到下一行，并使其全宽

<div class="container">
<div class="row">
 <!-- column one -->
 <div class="col-lg-6 col-md-6 col-sm-8 col-xs-12">
  <div>Content One</div>
 </div>

 <!-- column two -->
 <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
  <div>Content Two</div>
 </div>

 <!-- column three -->
 <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
  <div>Content Three</div>
 </div>

 </div>
 </div>


选项3

另一个选项是使用嵌套，如下所示：
DEMO:


因为3是个奇数，所以剩下一列

<div class="container">

<div class="row">

<div class="col-lg-6 col-md-6 col-sm-7">
 <div>Content One</div>
</div>

<div class="col-lg-3 col-md-3 col-sm-5">
 <div>Content Two</div>
</div>

<div class="col-lg-3 col-md-3 col-sm-7">
 <div>Content Three</div>
</div>

<div class="col-lg-6 col-md-6 col-sm-5">
 <div>Content One</div>
</div>

<div class="col-lg-3 col-md-3 col-sm-7">
 <div>Content Two</div>
</div>

<div class="col-lg-3 col-md-3 col-sm-5">
 <div>Content Three</div>
</div>  

 <div class="col-lg-6 col-md-6 col-sm-7">
  <div>Content One</div>
 </div>

 <div class="col-lg-3 col-md-3 col-sm-5">
  <div>Content Two</div>
 </div>

<div class="col-lg-3 col-md-3 col-sm-12">
 <div>Content Three</div>
</div>

</div>
</div>  


内容一
内容二
内容三
内容一
内容二
内容三
内容一
内容二
内容三
谢谢，但该页面将承载来自新闻提要的内容，因此它应该在整个页面上显示大栏小栏，而不是在一行上显示大栏小栏，在另一行上显示大栏全宽。也许我需要Javascript砖石风格插件？我不确定我是否完全理解您想要实现的目标，但我用另一个选项编辑了我的答案。再次感谢..我用一个图形更新了我的问题，以说明我正在查看的内容：--嵌套示例的另一个变体。
<div class="container">

<div class="row">

<div class="col-lg-6 col-md-6 col-sm-7">
 <div>Content One</div>
</div>

<div class="col-lg-3 col-md-3 col-sm-5">
 <div>Content Two</div>
</div>

<div class="col-lg-3 col-md-3 col-sm-7">
 <div>Content Three</div>
</div>

<div class="col-lg-6 col-md-6 col-sm-5">
 <div>Content One</div>
</div>

<div class="col-lg-3 col-md-3 col-sm-7">
 <div>Content Two</div>
</div>

<div class="col-lg-3 col-md-3 col-sm-5">
 <div>Content Three</div>
</div>  

 <div class="col-lg-6 col-md-6 col-sm-7">
  <div>Content One</div>
 </div>

 <div class="col-lg-3 col-md-3 col-sm-5">
  <div>Content Two</div>
 </div>

<div class="col-lg-3 col-md-3 col-sm-12">
 <div>Content Three</div>
</div>

</div>
</div>