Can I alter the way Bootstrap places columns? - flexbox

Question

I am looking for a way to make a row with 8 col-md-6 divs display in a different way than usual.
How bootstrap normally does it:
How I want it:
The number columns is dynamic so it can exceed 20 for example and be a uneven number.
Code:
<div class="row">
{foreach from=$item.Opties|default:array() name=optie item=optie key=key}
<div class="col-md-6">
test {$optie#iteration} (normally there is more code in here)
</div>
{/foreach}
</div>
I have tried:
order-md-* but for this solution i need to add css since it might exceed 12 which i'd rather not.
Having just 2x .col-md-6 and the foreach in there but its a bad solution. since then I have big piece of html twice.

Answer 1

If you can't change the markup structure there's no simple way.
One option is to use flex-column but there is no way to set the number of divs per column so you'd have to use max-height...
#media(min-width:768px) {
.mh {
flex-direction: column;
max-height:140px;
}
}
Another option is to use CSS columns which order from top to bottom instead of left to right.
.row.columns {
column-count: 2;
column-gap: .1rem;
display:block;
}
.columns > .col-md-6 {
display: inline-block;
width: 100%;
max-width: 100%;
}
The last option is to use flexbox ordering for the specific positions...
<div class="row">
<div class="col-md-6 order-1">
<div class="border p-1">1</div>
</div>
<div class="col-md-6 order-3">
<div class="border p-1">2</div>
</div>
<div class="col-md-6 order-5">
<div class="border p-1">3</div>
</div>
<div class="col-md-6 order-7">
<div class="border p-1">4</div>
</div>
<div class="col-md-6 order-2">
<div class="border p-1">5</div>
</div>
<div class="col-md-6 order-5">
<div class="border p-1">6</div>
</div>
<div class="col-md-6 order-4">
<div class="border p-1">7</div>
</div>
<div class="col-md-6 order-8">
<div class="border p-1">8</div>
</div>
</div>
Demo: https://www.codeply.com/go/IczuqP9l7K