Bootstrap Cards Not Shifting Down

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://i.stack.imgur.com/jMM2O.jpg

<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">
        <a href="/aboutme/smigel" class="btn btn-primary">Find Out More!</a>
      </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">
        <a href="/aboutme/harris" class="btn btn-primary">Find Out More!</a>
      </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">
        <a href="/aboutme/krzyminski" class="btn btn-primary">Find Out More!</a>
      </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">
        <a href="/aboutme/walther" class="btn btn-primary">Find Out More!</a>
      </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