html - How to stack bootstrap cards from horizontally to vertical in order to make it responsive?

Question

I am using Bootstrap to evenly align horizontally two cards, but I want to make it responsive so mobile users can see both cards stacked one above the other (in a column). So far I tried adding '''flex-direction''' with the @media tag to the '''justify-content-center''' tag. I also tried removing '''text-center''', '''object-fit: contain;''' and changing all types of '''display'''. I am kind of new to front end. Appreciate any help.

CSS:

.separado{
    display: inline-block;
    *display: inline; /* For IE7 */
    zoom: 1; /* Trigger hasLayout */
    width: 45%;
    text-align: center;
    margin-right: 5%; 
    margin-left: 5%;
    margin-bottom: 3%;
  }

  .imagen_top3{
    object-fit: contain;
    max-height: 600px;
    border: 5px solid #252727;
    padding: 1px;
  }

@media screen and (max-width: 980px) {
  .list-images img {
    width: 100%;
    margin: 3%;
    flex-direction: column;
  }
  .separado{
    zoom: 1; /* Trigger hasLayout */
    width: 100%;
    text-align: center;
    margin: 3%;
    flex-direction: column;
  }

  
}

HTML:

<div class="d-flex justify-content-center text-center">
      <div class="card text-center separado" style="width: 40%; background-color: #252727;">
        <img class="card-img-top imagen_top3" src="image1.jpeg" alt="Card image cap">
        <div class="card-body">
          <p class="card-text" style="color:whitesmoke">Hi im John</p>
        </div>
      </div>
      <div class="card text-center separado" style="width: 40%;background-color: #252727;">
        <img class="card-img-top imagen_top3" src="image2.jpeg" alt="Card image cap">
        <div class="card-body">
          <p class="card-text" style="color:whitesmoke">Hi im Peter</p>
        </div>
      </div>
</div>

Answer 1

There is no need for CSS, just use the bootstrap inbuilt grid;

<div class="row">
  <div class="col-xxl-6 col-md-12">
    <div class="card text-center">
      <img class="card-img-top" src="https://source.unsplash.com/ewqfhcrLoYA" alt="Card image cap">
      <div class="card-body">
        <p class="card-text" style="color:whitesmoke">Hi im John</p>
      </div>
    </div>
  </div>
  <div class="col-xxl-6 col-md-12">
    <div class="card text-center">
      <img class="card-img-top" src="https://source.unsplash.com/Edz4CIdzpA8" alt="Card image cap">
      <div class="card-body">
        <p class="card-text" style="color:whitesmoke">Hi im Peter</p>
      </div>
    </div>
  </div>
</div>

Remove all the CSS you provided except with the one for styling purpose.

Codepen: https://codepen.io/manaskhandelwal1/pen/rNMqYag