html - 调整大小时引导6到3列

我试着用Bootstrap编码，我有一些问题。
我一行有6列（6x1）：

<div class="row">
       <div class="col-md-2 col-sm-2"></div>
       <div class="col-md-2 col-sm-2"></div>
       <div class="col-md-2 col-sm-2"></div>
       <div class="col-md-2 col-sm-2"></div>
       <div class="col-md-2 col-sm-2"></div>
       <div class="col-md-2 col-sm-2"></div>
    </div>

屏幕关闭后，在第一个制动点，我想要3x2：

<div class="row">
       <div class="col-md-4 col-sm-4"></div>
       <div class="col-md-4 col-sm-4"></div>
       <div class="col-md-4 col-sm-4"></div>
       <div class="col-md-4 col-sm-4"></div>
       <div class="col-md-4 col-sm-4"></div>
       <div class="col-md-4 col-sm-4"></div>
    </div>

然后当屏幕变得太小的时候我想要1x6
以下是截图：
有可能吗？

最佳答案

我想这就是你想要的：

<div class="row">
       <div class="col-md-2 col-sm-4 col-xs-12"></div>
       <div class="col-md-2 col-sm-4 col-xs-12"></div>
       <div class="col-md-2 col-sm-4 col-xs-12"></div>
       <div class="col-md-2 col-sm-4 col-xs-12"></div>
       <div class="col-md-2 col-sm-4 col-xs-12"></div>
       <div class="col-md-2 col-sm-4 col-xs-12"></div>
</div>

bootply example
在中断点及以上位置，所有div将放在一行中。在小的断点处有两行三列。在额外的小转折点，你将有一个单一的列。