如何根据屏幕尺寸重新排序<ol>（引导程序4）

Question

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

当访问者的设备中等宽度时，它将通过添加类“ col-md-6”将这些项目分为两列，但这会给我一个水平定向的项目列表，像这样

1 2
3 4
5 6
7 8
9

我该如何获取引导程序，而不是为媒体布置这样的项目：

1 6
2 7
3 8
4 9
5

就像这样：

1 4 7
2 5 8
3 6 9

仅CSS（没有JavaScript）有可能吗？

Answer 1

您可以使用flexbox来订购商品，但为了包装它们，您需要显式设置容器的高度，以仅在一列中包含所需数量的元素。

例如如果要有4列（每列20像素高），则必须将容器的高度设置为80像素。

ol {
  height: 160px;
}

li {
  height: 20px;
}

@media (min-width: 768px) {
  ol {
    height: 100px;
  }
}

@media (min-width: 992px) {
  ol {
    height: 60px;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<ol class="d-flex flex-column flex-wrap">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

Answer 2

您可以使用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;
    }
}

结果

在中等设备上

在大型设备上

小提琴： http://jsfiddle.net/2dztLsvb/13/