Par Valentin Brosseau / @c4software

Source : statcounter.com
Mon choix… Mobile first.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />(À ajouter dans votre head)
/** Valeur par defaut **/
body {
background: red;
}
/** Valeur pour un viewport <= 800px **/
@media (max-width: 800px) {
body {
background: blue;
color: white;
}
}(Dans votre fichier CSS)

<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>

<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
100% sur mobile, 50% sur desktop / tablette
</div>
<div class="col-sm-12 col-md-6">
100% sur mobile, 50% sur desktop / tablette
</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>Un système « de composants » pour éviter d'écrire de la CSS « basique »