Столбцы начальной загрузки переносятся, если содержимое слишком длинное

Question

Я не уверен, правильное ли слово - перенос, но у меня есть столбец, который может быть очень длинным. И я хотел бы, чтобы он переходил к следующему набору столбцов, когда он достигнет конца div.

, что я хотел бы:

col-3 col-3 a
a     a     a
a     a     a 
a     a     col-3
a     a     a
______________ end of div

Я хотел бы второй столбец 3обернуть в размер первого столбца-3, в конце иметь 2 столбца одинакового размера и один с тем, что осталось после заполнения длины.

Что у меня есть сейчас:

col-3 col-3 col-3
a     a     a
a     a     
a     a     
a     a 
      a
      a
      a
      a    
______________ end of div

Мой код:

<div className="container">
      <h2>{listing.name}</h2>
      <div className="row">
        <div className="col-md-6">
          <SlickAll />
            <ul>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
            </ul>


        </div>
        <div className="col-md-3 mh-100">
          <ul className="list-group">
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
             <li>asd </li>
          </ul>
        </div>

        <div className="col-md-3 mh-100">
          <ul className="list-group">
             <li>asd </li>
          </ul>
        </div>
      </div>
    </div>

Answer 1

Вы можете использовать перенос столбцов flexbox и ограничить высоту правых боковых столбцов, поместив их в контейнер position:absolute ...

   <div class="row my-3 mx-auto">
        <div class="col-md-6">
            <ul class="list-group">
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                <li>list</li>
                ...
            </ul>
        </div>
        <div class="col-md">
            <div class="position-absolute w-100 h-100">
                <ul class="list-group d-flex flex-column flex-wrap mh-md-100">
                    <li>list</li>
                    <li>list</li>
                    <li>list</li>
                    <li>list</li>
                    ...
                    <li>listend</li>
                </ul>
            </div>
        </div>
    </div>

https://www.codeply.com/go/L7WH4YZNBW

только дополнительный CSS должен заставить работать max-height быстро. Это позволяет столбцам располагаться вертикально на меньших экранах (шириной менее md) ...

@media (min-width: 768px) {
    .mh-md-100 {
        max-height: 100%;
    }
}