Sommaire

L’ordre des blocs selon l’écran

Nous pouvons modifier l’ordre d’affichage des blocs selon la taille de l’écran, avec les classes .order-[n] et .[size]-order-[n]. Le suffixe [n] indique le numéro d’ordre de l’affichage et [size] indique la taille de l’écran.

Voici le code HTML utilisé dans cet exemple :

<div class="row"> 
  <div class="column order-1 medium-order-2"> 
     <p><strong>Bloc 1</strong>, affiché en second pour les écrans moyen  
et large et<br /> 
en premier pour les petits écrans.</p> 
  </div> 
  <div class="column order-2 medium-order-1"> 
     <p><strong>Bloc 2</strong>, affiché en premier pour les écrans moyen  
et large et<br /> en premier pour les petits écrans.</p> 
  </div> 
</div>

Le fichier de cet exemple à télécharger est : Chapitre 04 / 04-grille-h.html.

Dans l’unique ligne (<div class="row">), nous avons deux blocs.

Le premier utilise d’abord la classe .order-1 qui indique que le numéro d’ordre d’affichage est le 1 pour tous les types d’écran puisqu’il n’y a pas de précision de taille. Ensuite, nous avons la classe .medium-order-2 qui indique que le numéro d’ordre d’affichage est le 2 pour les écrans ...