отзывчивый элемент группы списков из двух столбцов в один

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 для создания двух столбцов в запросе 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>

(Запустите фрагмент кода, чтобы увидеть макет мобильного устройства, затем просмотрите полный экран, чтобы увидеть макет устройства большего размера)