How do I make responsive 3 rows with images

I have a problem that I my grid looks quite different on mobile devices, meanwhile on PCs, it looks just like I wanted, and I realized that it's a grid's issue, but I don't really know how to fix it since it gives different results all the time. Here's the code I use:

.offer .card-img {
  width: 220px;
  height: 300px;
  background-size: cover;
}
.offer {
  cursor: pointer;
  transition: all 130ms ease;
}

.card-img:hover {
  transform: scale(1.01);
  background-color: black !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container pt-5">
  <div class="container">
    <div class="row">
    <figure>
      <div class="col-md-4">
        <div class="card offer">
          <div class="card-img" style="background: url('https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg') no-repeat center center" alt=""></div>
          <div class="card-img-overlay">
            <h5 class="mx-auto">Classic</h5>
          </div>
        </div>
      </div>
    </figure>
      <figure> 
        <div class="col-md-4">
          <div class="card offer">
            <div class="card-img" style="background: url('https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg') no-repeat center center" alt=""></div>
            <div class="card-img-overlay">
              <h5 class="mx-auto">Classic</h5>
            </div>
          </div>
        </div>
      </figure>
      </div>
     
      <div class="row justify-content-center">
          <figure >
            <div class="col-md-6">
            <div class="card offer">
              <div class="card-img" style="background: url('https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg')  no-repeat right center" alt=""></div>
              <div class="card-img-overlay">
                <h5 class="mx-auto">Classic</h5>
                <p class="card-text"></p>
              </div>
            </div>
          </div>
          </figure>
        </div>
      </div>
    </div>

and this is how it looks on my website

but when i resize my screen, it changes to this

I would appreciate any help.