Bootstrap Cards Not Shifting Down - html

Question

I am trying to get some help with my bootstrap cards. I have 4 cards which extend horizontally across the whole width of the page. When visiting the website on a mobile device they stay all still extend horizontally and then stretch vertically. I would like them to stay one on top of another. Help would be appreciated. Thanks.
Pictures: https://imgur.com/a/W65324F
<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="row">
<div class="col-sm-4 my-4" style="max-width:25% !important;">
<div class="card">
<img class="card-img-top" src="/images/personal/harris.jpeg" alt="">
<div class="card-body">
<h4 class="card-title">Bill Harris</h4>
<h6 class="card-subtitle mb-2 text-muted">Counselor</h6>
<p class="card-text">Mr. Harris is going to be Maui for Halloween!</p>
</div>
<div class="card-footer">
Find Out More!
</div>
</div>
</div>
<div class="col-sm-4 my-4" style="max-width:25% !important;">
<div class="card">
<img class="card-img-top" src="/images/personal/smiegel.jpeg" alt="">
<div class="card-body">
<h4 class="card-title">Emily Smigel</h4>
<h6 class="card-subtitle mb-2 text-muted">Counselor</h6>
<p class="card-text">Ms. Smigel is a Fullstack Developer.</p>
</div>
<div class="card-footer">
Find Out More!
</div>
</div>
</div>
<div class="col-sm-4 my-4" style="max-width:25% !important;">
<div class="card">
<img class="card-img-top" src="/images/personal/krzyminski.jpeg" alt="">
<div class="card-body">
<h4 class="card-title">Marcy Krzyminski</h4>
<h6 class="card-subtitle mb-2 text-muted">Secretary</h6>
<p class="card-text">Ms. Krzyminski is a computer repair technician.</p>
</div>
<div class="card-footer">
Find Out More!
</div>
</div>
</div>
<div class="col-sm-4 my-4" style="max-width:25% !important;">
<div class="card">
<img class="card-img-top" src="http://placehold.it/550x550" alt="">
<div class="card-body">
<h4 class="card-title">Patti Walther</h4>
<h6 class="card-subtitle mb-2 text-muted">Secretary</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
</div>
<div class="card-footer">
Find Out More!
</div>
</div>
</div>
</div>

Answer 1

To adjust the number of columns items will take up in Bootstrap, use media queries and col-X-n where X is screen size in xs, sm, etc. and n is number of columns (1-12).
In your case, adding the class col-xs-6 will make it so your 4-column layout breaks into 2 columns at smaller widths. col-xs-12 would instead give you 1 column.
Here's the Bootstrap responsive breakpoint reference for good measure!

Answer 2

You can use flexbox and media queries to solve this:
#media (max-width: 600px) {
.row{
display: flex;
flex-direction: column;
}
}
where .row is the container of the cards