Bootstrap colonnes imbriquées effondrant trop tôt

Question

J'ai créé des colonnes imbriquées comme suit:

<div class="row"> 
    <div class="col-sm-6"> 
     <div class="row"> 
      <div class="col-sm-6">A1</div> 
      <div class="col-sm-6">B1</div> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="row"> 
      <div class="col-sm-6">A2</div> 
      <div class="col-sm-6">B2</div> 
     </div> 
    </div> 
</div> 

est-il de toute façon de garder les colonnes imbriquées de s'effondrer beaucoup plus tard lorsque l'écran est trop maigre pour s'adapter leur?

Answer 1

Vous devez ajouter col-xs-12 à chaque colonne principale et col-xs-6 pour la ligne imbriquée:

<div class="row"> 
    <div class="col-sm-6 col-xs-12"> 
     <div class="row"> 
      <div class="col-sm-6 col-xs-6">A1</div> 
      <div class="col-sm-6 col-xs-6">B1</div> 
     </div> 
    </div> 
    <div class="col-sm-6 col-xs-12"> 
     <div class="row"> 
      <div class="col-sm-6 col-xs-6">A2</div> 
      <div class="col-sm-6 col-xs-6">B2</div> 
     </div> 
    </div> 
</div>