Nous avons vu dans le Principe de base comment séparer le contenu en plusieurs colonnes.

Nous allons maintenant voir comment adapter dynamiquement ces colonnes en fonction de la largeur de l'écran.

Admettons qu'on reprenne notre exemple précédent avec les 2 paragraphes de 6 colonnes chacun. Le problème c'est que pour un format mobile, ce ne serait pas lisible sur 2 paragraphes côte à côte.

Voici donc le code pour que les paragraphes soit côte à côte sur ordinateur et à la fois l'un en dessous de l'autre qu'il soit à la colonne.

<div class="col-xs-12 col-lg-6">
  <p>Lorem ipsum dolor sit ...</p>
</div>
<div class="col-xs-12 col-lg-6">
  <p>Lorem ipsum dolor sit ...</p>
</div>

Les paragraphes conservent ainsi le même aspect que sur Principe de base sur ordinateur et prennent cet aspect sur mobile:

Voici tous les formats de colonnes que Boostrap propose:

  col-xl => Format grand écran (+1200 px de largeur)
  col-lg => Format écran classique (+992 px de largeur)
  col-md => Format tablette (+768 px de largeur)
  col-sm => Format mobile paysage (+576 px de largeur)
  col-xs => Format mobile portrait (-576 px de largeur)

Vous devriez maintenant être capable de comprendre ce bout de code:

<div class="col-xs-12 col-md-6 col-xl-4">
  <p>Lorem ipsum dolor sit ...</p>
</div>