Bootstrap columns wrap if content too long - html

Question

I'm not sure if wrap is the right word, but i have a column that can be very long.
And i would like it to wrap to the next set of columns when it reaches the end of the div.
what i would like:
col-3 col-3 a
a a a
a a a
a a col-3
a a a
______________ end of div
I would like the second col-3 to wrap at the size of the first col-3, in the end to have 2 columns the same size and one with what's left over after the length is filled.
What i have right now:
col-3 col-3 col-3
a a a
a a
a a
a a
a
a
a
a
______________ end of div
My code:
<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

You can use flexbox column wrap, and limit the height of the right side columns by placing them in a position:absolute container...
<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
The only extra CSS is to make the max-height work responsively. This allows the columns to stack vertically on smaller screens (less than md width)...
#media (min-width: 768px) {
.mh-md-100 {
max-height: 100%;
}
}