Bootstrap Cards, show 2 of them in a row

Question

This is how it looks when I have some cards beneath each other by using:

<div class="row">
    <div class="col-md-6">
        stuff
    </div>
    <div class="col-md-6">stuff</div>
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
</div>

What did I miss out on CSS in order for them to not look this weird, but adapt? I want to have it aligned like this:

Answer 1

I would suggest the following:

.cards-container {
  column-count: 2;
}

.cards-container div {
   background: floralwhite;
   height: 50px;
   margin: 10px 0;

   // to avoid column breaks
   -webkit-column-break-inside: avoid;
   page-break-inside: avoid;
   break-inside: avoid;
}

.cards-container div:first-child {
    margin: 0;
}

<div class="cards-container">
<div class="col-md-6">
    stuff
</div>
<div class="col-md-6">stuff</div>
<div class="col-md-6">stuff</div>
<div class="col-md-6">stuff</div>
</div>