根据屏幕大小更改列数

我正在尝试使用Bootstrap，我想知道如何根据屏幕大小调整列数。 我从Bootstrap CSS教程中看到了这个：

 
 
.col-xs-12 .col-md-8
 
.col-xs-6 .col-md-4
 
  
 
.col-xs-6 .col-md-4
 
.col-xs-6 .col-md-4
 
.col-xs-6 .col-md-4
 
  
 
.col-xs-6
 
.col-xs-6
  

我在大屏幕尺寸上有6列，我想在中型屏幕上将其切换为两行3列，在小屏幕上切换为3行2列。 在我看来，我只能改变列的宽度而不是列的数量。 我可以用Bootstrap来做，如果没有，这将是一个好方法吗？ JavaScript的？

Answer 1

是的，您可以使用Bootstrap更改列数。 这就是灵活网格的用途。

这是一个遵循您的说明的示例：

 
 
first
 
second
 
third
 
fourth
 
fifth
 
sixth
  

请参阅Bootply演示 。

Answer 2

Answer 3

 
 
Column 6 Large
 
Column 1 Medium
 
Column 2 Medium
 
Column 1 Small
 
Column 2 Small
 
Column 3 Small
  

应该注意的是，在像这样的单独列中具有重复内容对于SEO来说并不是很好。 您可能希望通过使用嵌套列来更精细地控制内容而不必复制它。