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

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

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/[email protected]/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>