使列在一行中响应地彼此分开，而不是水平填充。

Question

我有一个有6列的行，当屏幕变小时，我想把它分成3列x2行。

我遇到了一个代码熟练的人，几乎就是这样的：https://codepen.io/davidsbaldwin/PdMqzB。

但是，代码页使用Bootstrap 3.3，当我将这个CSS格式复制到我的Bootstrap 4页面时，它就不工作了。每一列都是垂直展开的，其中一列低于另一列。你能帮上忙吗？

<div class="container"> <div class="row"> <div class="col-sm-4 col-lg-2 index-1"> 1 </div> <div class="col-sm-4 col-lg-3 index-2"> 2 </div> <div class="col-sm-4 col-lg-1 index-3"> 3 </div> <div class="col-sm-4 col-lg-2 index-4"> 4 </div> <div class="col-sm-4 col-lg-1 index-5"> 5 </div> <div class="col-sm-4 col-lg-3 index-6"> 6 </div> </div> </div>

截图：

视野广阔：

我希望它在一个小屏幕上的外观(根据代码)：

​

我的代码当前如何在小屏幕上呈现：

​

​

我怎样才能做到这一点？谢谢你的帮助!

Answer 1

试试这段代码，对于XS和SM，每个DIV应该使用4列，对于MD和LG，应该使用其他配置。

<div class="container">
    <div class="row">
        <div class="col-xs-4 col-md-2"> 1 </div>
        <div class="col-xs-4 col-md-3"> 2 </div>
        <div class="col-xs-4 col-md-1"> 3 </div>
        <div class="col-xs-4 col-md-2"> 4 </div>
        <div class="col-xs-4 col-md-1"> 5 </div>
        <div class="col-xs-4 col-md-3"> 6 </div>
    </div>
</div>

另外，类索引-N用于什么？

对不起，只需阅读更多关于引导4，这应该是它的代码，最后一个是启动3。

<div class="container">
    <div class="row">
        <div class="col-4 col-md-2"> 1 </div>
        <div class="col-4 col-md-3"> 2 </div>
        <div class="col-4 col-md-1"> 3 </div>
        <div class="col-4 col-md-2"> 4 </div>
        <div class="col-4 col-md-1"> 5 </div>
        <div class="col-4 col-md-3"> 6 </div>
    </div>
</div>