Making a horizontal image row into a vertically stacked line on smaller screens in Bootstrap 4

Question

I have a row of images that on a normal large display goes nicely across the screen, but when I go to a smaller display it just shrinks the images and keeps them horizontally across the small screen. How would I go about making it responsive so it stacks vertically when it goes to the smaller screen size.

<div class="container">
  <div class="imgRow">
    <div class="d-flex justify-content-around">
      <div class="col-sm-3 w-25">
        <img
          src="image1.jpg"
          class="img-fluid"
          alt="..."
        />
      </div>
      <div class="col-sm-3 w-25">
        <img
          src="image2.jpg"
          class="img-fluid"
          alt="..."
        />
      </div>
      <div class="col-sm-3 w-25">
        <img
          src="image3.jpg"
          class="img-fluid"
          alt="..."
        />
      </div>
    </div>
  </div>
</div>

The only CSS I have for this row is as follows:

.container .imgRow {
  padding-bottom: 10%;
}

@media only screen and (max-width: 768px) {

  .imgRow img {
    width: 100;
  }
}

I've tried removing the CSS, taking out the image-fluid, changing the col- to all different things, taking it out the container, and taking out the justify-content-around.

Answer 1

You could use Bootstrap's row and tell each of your columns when you want them to be all on one line versus being on separate lines.

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row bg-dark d-flex justify-content-around"> <div class="col-12 col-md-3 bg-warning"> <img src="https://via.placeholder.com/200x100.png" class="mx-auto d-block img-fluid" alt="..." /> </div> <div class="col-12 col-md-3 bg-primary"> <img src="https://via.placeholder.com/200x100.png" class="mx-auto d-block img-fluid" alt="..." /> </div> <div class="col-12 col-md-3 bg-info"> <img src="https://via.placeholder.com/200x100.png" class="mx-auto d-block img-fluid" alt="..." /> </div> </div> </div>