Can't figure out responsive cards in Bootstrap 4 - html

Question

I just built a new site from scratch using Bootstrap 4. I created a fluid container, then into that I inserted a Grid Row with 8 columns, and into each of these 8 columns I inserted a card with images.
Everything looked fine until I realized that it isn't responsive. In fact at xl the cards display at 4 in a row, but at lg the cards all stack vertically as if viewing on a phone.
Try as I might, I can't get the cards to be responsive no matter how much I play with the col classes.
Can someone help me to get this thing responsive? Basically I'd like the cards 4 across at xl (that's what they're doing now), 3 across at lg, and 2 across at md, sm, and xs. Again, right now it's displaying at 4 across at xl and only 1 across (stacking vertically) at all other sizes.
This is my first time here and hopefully after I type this I can include some code. Much appreciated.
Code example:
<div class="container-fluid">
<!--Image Grid-->
<div class="row">
<!--Real people Reel-->
<div class="col-xl-3">
<div class="card col-md-4 col-xl-12"> <img class="card-img-top img-fluid" src="images/university_hospital_network.jpg" alt="Real people Reel"> </div>
<div class="card-body">
<h5 class="card-title">Real People Reel</h5>
<p class="card-text text-open-sans">Your greatest and most credible asset.</p>
<br>
<br>
</div>
</div>
<!--End Real People Reel-->
<!--University Hospital Newark-->
<div class="col-xl-3">
<div class="card col-md-4 col-xl-12"> <img class="card-img-top img-fluid" src="images/surgeons.jpg" alt="Real people Reel"> </div>
<div class="card-body">
<h5 class="card-title">University Hospital Newark</h5>
<p class="text-open-sans">Medical accuracy... expert compliance, clearances and licensing expertise.</p>
<br>
<br>
</div>
</div>
<!--End University Hospital Newark-->

Answer 1

I think each "item" in a row, insert responsive class to there like that.
<div class="container-fluid">
<!--Image Grid-->
<div class="row">
<!--Real people Reel-->
<div class="col-xl-3 col-lg-4 col-md-6"> <!-- add new class here -->
<div class="card"> <!-- remove class here -->
<img class="card-img-top img-fluid" src="images/university_hospital_network.jpg" alt="Real people Reel"> </div>
<div class="card-body">
<h5 class="card-title">Real People Reel</h5>
<p class="card-text text-open-sans">Your greatest and most credible asset.</p>
</div>
</div>
<!--End Real People Reel-->
<!--University Hospital Newark-->
<div class="col-xl-3 col-lg-4 col-md-6">
<div class="card">
<img class="card-img-top img-fluid" src="images/surgeons.jpg" alt="Real people Reel"> </div>
<div class="card-body">
<h5 class="card-title">University Hospital Newark</h5>
<p class="text-open-sans">Medical accuracy... expert compliance, clearances and licensing expertise.</p>
</div>
</div>
</div>
<!--End University Hospital Newark-->
</div>
</div>
By the way, visit W3School for more information about Bootstrap 4 grid system
So I hope it can help you.