Placer les div en boostraap les unes sous les autres

bonjour a tous

voici une boucle en php

        <div class="container" style=" min-width:900px;max-width: 100%;margin:auto;">
        <?php foreach($exemple as $donnees){?>
      <div class="row">
       <div class="card"style=" width: 20%;">
        <div class="card-body">
         <p class="card-text"><?= $donnees['pseudo'] ?></p>
        </div>
       </div>
       <div class="card"style=" width: 80%;">
        <div class="card-body">
         <p class="card-text"><?= $donnees['message'] ?></p>
        </div>
       </div>  

      </div>
        <?php
}   
?>
     </div>
       
       
   

jusque la pas de soucis mes données sont bien affichées en tableau et la boucle c est ok

donc mon résultat est une colonne avec les pseudo et l autre les message

a présent je souhaiterais que sur un petit écran
il y a
pseudo1
message1
pseudo2
message2
pseudo3
message 3
pseudo4
message4

merci de l aide