Bootstrap 3 a été pensé avant tout pour 4 résolutions d’écran, soit
- moins de 768 pixels en largeur, correspondant à la classe col-xs-*
- entre 768 pixels et 992 pixels en largeur, correspondant à la classe col-sm-*
- entre 993 et 1200 pixels en largeur, correspondant à la classe col-md-*
- et plus de 1200 pixels en largeur, soit la classe col-lg-*
Ces classes doivent être contenue dans une classe row, correspondant à 12 colonnes , comme le schéma ci dessous le montre .
Ainsi si vous avez le code suivant,
<div id=”parents”>
<div id=”enfant1”></div>
<div id=”enfant2”></div>
</div>
avec 2 div (enfant1 et enfant2), et que vous souhaitez qu’elles s’affichent l’une à côté de l’autre lorsque la taille de l’écran est comprise entre 993 et 1200 pixels et qu’elles s’affichent l’une au dessus de l’autre pour des résolutions inférieures, ajoutez une classe col-md-* , * representant le nombre de colonnes occupées par une div (le total des * devant être égal à 12).
Ainsi, le code pour afficher chacune des div sur 50% de l’écran ou de l’espace quand celui ci a une résolution 992 et 1200 pixels sera
<div id=”parents” class=”row”>
<div id=”enfant1” class=”col-md-6”></div>
<div id=”enfant2” class=”col-md-6”></div>
</div>
et les résolutions inférieures empileront les deux div l’une sur l’autre.
facile non ? 
