css - 响应式列表 - 将元素从两列合并为一列

Question

我正在使用 Bootstrap 4 并创建了一个元素列表并将其分为两列(见图)。当我将网站缩小到手机屏幕时，它显示如下:

但我希望当我将它缩小到移动尺寸(响应式)时，它只在一列中显示给我。我希望它是这样的:

这是我的代码:

.list-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: column;
}

li {
  grid-column: 1;
}

li:nth-last-child(-n+7) {
  grid-column: 2;
}

<section class="info2">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2 class="section-heading">Lorem ipsum dolor sit amet.</h2>
      </div>
    </div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit amet.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem, ipsum dolor.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit amet.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem, ipsum dolor.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit amet consectetur.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem, ipsum dolor.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit amet.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem, ipsum dolor.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum, dolor sit amet consectetur adipisicing.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem, ipsum dolor.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem, ipsum.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit amet.
        <i class="fas fa-check"></i>
      </li>
    </ul>
  </div>

即使这是一个完全初学者的问题，我也很感激你的帮助。

Answer 1

您可以只添加一些media 查询，以便CSS 仅应用于特定尺寸的设备。

为了让它在移动设备上成为一列而在更大的设备上成为两列，您需要将您创建的用于使其成为两列的 CSS 放在一个表示“over a”的 media 查询中某些设备宽度，应用这个'。

.list-group {
  display: grid;
  grid-template-columns: 1fr;
}

@media screen and (min-width:767px) {
.list-group {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: column;
}

li {
  grid-column: 1;
}

li:nth-last-child(-n+7) {
  grid-column: 2;
}

}

<section class="info2">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2 class="section-heading">Lorem ipsum dolor sit amet.</h2>
      </div>
    </div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit amet.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem, ipsum dolor.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit amet.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem, ipsum dolor.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit amet consectetur.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem, ipsum dolor.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit amet.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem, ipsum dolor.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum, dolor sit amet consectetur adipisicing.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem, ipsum dolor.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem, ipsum.
        <i class="fas fa-check"></i>
      </li>
      <li class="list-group-item list-group-item-action">
        Lorem ipsum dolor sit amet.
        <i class="fas fa-check"></i>
      </li>
    </ul>
  </div>

(运行代码片段以查看移动布局，然后查看全屏以查看更大的设备布局)