Bootstrap 4 card-columns with grid - css

Question

Thanks to the many questions and answers on stackoverflow about card-columns, I could set tiled cols in row but it looks like some kind of padding or margin or else is breaking bootstrap's 12 columns per row "rule".
I am trying to achieve a masonry / pinterest tile layout, with Tile 1 and Tile 2 columns going under the description column, white text remains under picture profile.
In the below example, when I set the width of the description col to col-xl-4 makes it remain under the profile picture col instead of next to it.
Moreover, the description column takes the same height as the profile picture column.
<div class="container-fluid">
<div class="row card-columns">
<div class="col-xl-8 card">
<div class="card-body">
<h2>Profile picture</h2>
<img src="https://via.placeholder.com/900x500.jpg" alt="" class="img-fluid rounded">
</div>
</div>
<div class="col-xl-4 card">
<div class="card-body">
<h2>Description</h2>
</div>
</div>
<div class="col-xl-8 card">
<div class="card-body">
<h2>Text</h2>
</div>
</div>
<div class="col-xl-2 card">
<div class="card-body">
<h2>Tile 1</h2>
</div>
</div>
<div class="col-xl-2 card">
<div class="card-body">
<h2>Tile 2</h2>
</div>
</div>
</div>
</div>
How can I fix this? What am I missing here?

Answer 1

Tried it on this fiddle https://jsfiddle.net/pba8h4dk/.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-lg-9 card">
<div class="card-body">
<h2>Profile picture</h2>
<img src="https://via.placeholder.com/900x500.jpg" alt="" class="img-fluid rounded">
</div>
</div>
<div class="col-lg-3 card">
<div class="card-body">
<h2>Description</h2>
</div>
</div>
</div>
</div>
Removing card-columns class did the trick (and obviously making sure your screen is sm/md/lg/)