How too make bootstrap card box responsive

HTML

         <div class="row g-3">
           <div class="col-12 col-md-6 col-lg-4">
             <div class="card">
             <img src="putin1.png" alt="algemeen" class="card-img-top">
             <div class="card-body">
              <h5 class="card-title">Algemene Nieuws Klik hier</h5>
              <p class="card-text"> 
               
               Poetin kondigt gedeeltelijke mobilisatie af in televisietoespraak
              </p>
              <a href="algemeen.html" class="stretched-link"></a>
   
              </div>
             </div>
           </div>
           <div class="col-12 col-md-6 col-lg-4">
             <div class="card2">
               <img src="sport1.png" alt="sport" class="card-img-top">
               <div class="card-body">
                <h5 class="card-title">Sport nieuws Klik hier</h5>
                <p class="card-text"> Bankzitter of belangrijkste man, Depay wil 'ready' zijn: 'Laten zien dat ik scherp ben' 
                
                </p>
                <a href="sport.html" class="stretched-link"></a>
   
                </div>
               </div>
           </div>
           <div class="col-12 col-md-6 col-lg-4">
             <div class="card3">
               <img src="tank.png.jpg" alt="updates" class="card-img-top">
               <div class="card-body">
                <h5 class="card-title">Updates Klik hier</h5>
                <p class="card-text"> De gedeeltelijke mobilisatie gaat vandaag in.
              
                </p>
                <a href="updates.html" class="stretched-link"></a>
                </div>
               </div>
           </div>
         </div>
       </div>

This wont work if i make the screen smaller can someone please help? I need to have the card boxes under each ohter when i switch to mobile and here is my css

CSS

.card {
    background-color: rgb(174, 174, 174);
    height:325px;
    width:300px;
    border:1px solid black;
    transition:.3s;
    margin: 1rem;
    top: 40%;
    left: 40%;
    position: absolute;
}
.card:hover {
    cursor: pointer;
    box-shadow: 8px 8px 8px rgb(121, 121, 121);
    transform:scale(1.2);
}
.card2 {
    height:320px;
    width:300px;
    border:1px solid black;
    transition:.3s;
    margin: 3rem;
    background-color: rgb(174, 174, 174);
    top: 341px;
    left: 15%;
    position: absolute;
}
.card2:hover {
    cursor: pointer;
    box-shadow: 8px 8px 8px rgb(121, 121, 121);
    transform:scale(1.2);
}
.card3 {
    height:325px;
    width:300px;
    border:1px solid black;
    transition:.3s;
    margin: 3rem;
    background-color: rgb(174, 174, 174);
    top: 341px;
    left: 60%;
    position: absolute;
    
}
.card3:hover {
    cursor: pointer;
    box-shadow: 8px 8px 8px rgb(121, 121, 121);
    transform:scale(1.2);
}
img {
    float: left;
    width:  100px;
    height: 200px;
    object-fit: cover;
}

SO i want this to become responive like go under eachother on small screen and middle screen and large screen so everything fits good so i need in responsive but i dont know how can anyone help ? thanks.