Как выстроить список li на два блока при разрешение экрана 1024?

Question

[RushV]

Как реализовать выстраивание списка на два блока или столбика с помощь css?

<div class="menu-service">
  <ul class="list-group-service">
    <li class="list-group-item icon-security-system"></li>
    <li class="list-group-item icon-cctv"></li>
    <li class="list-group-item icon-electric-shock"></li>
    <li class="list-group-item icon-fire-extinguisher"></li>
    <li class="list-group-item icon-fire-alarm"></li>
    <li class="list-group-item icon-alarm"></li>
    <li class="list-group-item icon-fire-alarm"></li>
    <li class="list-group-item icon-settings"></li>
  </ul>
</div>

Answer 1

[0xD34F]

@media (max-width: 1024px) {
  .list-group-service {
    columns: 2;
  }
}

Comments

[Ankhena]

и inline-block для li, иначе перенос может оказаться по середине li

Answer 2

[nvdfxx]

@media (max-width: 1024px) {
  .list-group-service{
     column-count: 2
  }
}

Answer 3

[http404ntfnd]

Можно так

@media (max-width: 1024px) {
  .list-group-service{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100px;
  }
}

Значение высоты подберите сами

Comments

[RushV]

А это решение работает на всех браузерах?

[Сергей delphinpro]

RushV, Здесь есть большой минус — ограничение высоты. Лучше воспользоваться другими способами.
или пойти классическим путем:

.container { display: flex; flex-wrap: wrap; }
.item { width: 50% }

[http404ntfnd]

RushV, поддержка 95%

но Сергей delphinpro предложил вариант получше