Переместить превышающие элементы списка в следующий столбец в начальной загрузке

Question

У меня есть строка с двумя столбцами, как показано во фрагменте ниже. Здесь, в Столбец 1 , есть 7 элементы списка под тегом ul.

Но мне нужно показать Только 5 элементов списка в столбце 1, а остальные элементы должны перейти к следующему столбцу .. (т. Е. На Столбец 2 ) .

Как мне добиться результата, чтобы элементы списка автоматически перемещались в следующий столбец на основе количества (здесь его 5), если количество элементов списка превышает указанное количество (5) ..

И ожидаемый результат будет только в html и css, и не должно быть никакой библиотеки, такой как jquery или какой-либо другой третьей стороны.

Текущий фрагмент:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
 <div class="row">
 <div class="col-xs-4 mr-4">
 <ul class="list-group">
  <li class="list-group-item">List Item 1</li>
  <li class="list-group-item">List Item 2</li>
  <li class="list-group-item">List Item 3</li>
  <li class="list-group-item">List Item 4</li>
  <li class="list-group-item">List Item 5</li>
  <li class="list-group-item">List Item 6</li>
  <li class="list-group-item">List Item 7</li>
</ul>
 </div>
  <div class="col-xs-4 mr-4">
 Column-2
 </div>
 </div>
</div>

Ожидаемый результат:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">
     <div class="row">
     <div class="col-xs-4 mr-4">
     <ul class="list-group">
       <li class="list-group-item">List Item 1</li>
       <li class="list-group-item">List Item 2</li>
       <li class="list-group-item">List Item 3</li>
       <li class="list-group-item">List Item 4</li>
       <li class="list-group-item">List Item 5</li>
    </ul>
     </div>
      <div class="col-xs-4 mr-4">
     <ul class="list-group">
       <li class="list-group-item">List Item 6</li>
       <li class="list-group-item">List Item 7</li>
    </ul>
     </div>
     </div>
    </div>

Answer 1

Невозможно переместить элементы из одного DOM-контейнера в другой с помощью CSS.

Можно изменить макет поведение в одном контейнере, хотя CSS-Grid может сделать это , не требуя фиксированной высоты ....., используя явную и имплицитную сетку.

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-4 mr-4">
      <ul class="list-group">
        <li class="list-group-item">List Item 1</li>
        <li class="list-group-item">List Item 2</li>
        <li class="list-group-item">List Item 3</li>
        <li class="list-group-item">List Item 4</li>
        <li class="list-group-item">List Item 5</li>
        <li class="list-group-item">List Item 6</li>
        <li class="list-group-item">List Item 7</li>
        <li class="list-group-item">List Item 8</li>
        <li class="list-group-item">List Item 9</li>
        <li class="list-group-item">List Item 10</li>
      </ul>
    </div>
  </div>
</div>

Answer 2

Этого можно добиться с помощью flexbox, но и для гибкого контейнера (.list-group в этом случае), и для элементов flex (.list-group-item) необходимо иметь явную высоту для правильной упаковки.

И небольшое замечание: не используйте col-xs с Bootstrap 4, используйте col.

.list-group {
  height: 200px;
}

.list-group-item {
  height: 40px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-4 mr-4">
    <ul class="list-group d-flex flex-column flex-wrap">
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Dapibus ac facilisis in</li>
      <li class="list-group-item">Morbi leo risus</li>
      <li class="list-group-item">Porta ac consectetur ac</li>
      <li class="list-group-item">Vestibulum at eros</li>
      <li class="list-group-item">Porta ac consectetur ac</li>
      <li class="list-group-item">Vestibulum at eros</li>
      </ul>
    </div>
  </div>
</div>