html - 如何根据屏幕尺寸重新排序 (bootstrap 4)

Question

我的页面上有一个 html。当访问者的设备较小时，它将显示一个数字垂直增加的列。

当访问者的设备是中等宽度时，它会通过添加类“col-md-6”将这些元素分成两列，但这给了我一个水平方向的元素列表，就像这样

1 2
3 4
5 6
7 8
9

我怎样才能获得 bootstrap 而不是为媒体布置这样的元素:

1 6
2 7
3 8
4 9
5

像这样的大:

1 4 7
2 5 8
3 6 9

仅使用 CSS(不使用 JavaScript)是否可行？

Answer 1

您可以使用 CSS columns property ，特别是 column-count。

HTML

<div class="container">
    <ol>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>    
    </ol>
</div>

CSS

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    ol {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
        padding: 0;
    }

    ol > li {
        margin: 0 2rem; /* This is needed in order to show the bullets */
    }
}

/* Large devices (tablets, 992px and up) */
@media (min-width: 992px) {
    ol {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
    }
}

结果

在中型设备上

在大型设备上

fiddle : http://jsfiddle.net/2dztLsvb/13/