连续获取列以彼此相邻而不是水平填充

Question

我有6列的行，当屏幕变小时，我想分成3列x 2行。

我碰到一个密码笔几乎可以做到这一点：https://codepen.io/davidsbaldwin/PdMqzB。

但是，codepen使用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的类是什么？

对不起，请阅读更多有关Bootstrap 4的信息，这应该是它的代码，最后一个是有关Bootstrap 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>