Comment puis-je réorganiser les éléments de bloc en CSS tout en conservant leur effet d'empilement ?

Réorganisation des éléments de bloc à l'aide de CSS

Dans le développement Web, il peut devenir nécessaire de réorganiser l'ordre des éléments dans une page Web. Ceci peut être réalisé en utilisant CSS, sans recourir à des méthodes lourdes comme position: absolue. Cependant, le maintien de la fonctionnalité d'affichage : les propriétés du bloc doivent être prises en compte.

Énoncé du problème :

Considérez le code HTML avec trois éléments de bloc (Bloc A, Bloc B et Bloc C) disposé verticalement. Le but est d'échanger l'ordre de ces blocs en utilisant uniquement CSS, tout en préservant l'effet push vers le bas de display: block.

Extrait de code :

<div>
<p><strong>Solution utilisant CSS :</strong></p>
<p>Les requêtes multimédias CSS offrent la possibilité de modifier le comportement des éléments en fonction de la taille de l'écran. Dans ce cas, nous pouvons utiliser la propriété order pour réorganiser les éléments :</p>
<pre class="brush:php;toolbar:false">@media only screen and (max-device-width: 480px) {
  #blockC {
    order: 1;
  }
  #blockA {
    order: 2;
  }
  #blockB {
    order: 3;
  }
}

En définissant des valeurs d'ordre, nous manipulons l'ordre d'affichage des éléments sans modifier leur position dans le code source. Plus la valeur de commande est faible, plus l'élément apparaît tôt.

Exemple :

  
    <title>Block Reordering</title>
    <style>
      @media only screen and (max-width: 480px) {
        #parent {
          display: flex;
          flex-flow: column;
        }
        #a {
          order: 2;
        }
        #c {
          order: 1;
        }
        #b {
          order: 3;
        }
      }
    </style>
  
  
    <div><p>Dans cet exemple, lorsque la largeur de la fenêtre du navigateur est inférieure ou égale à 480px, l'ordre des blocs passe à : Bloc C, Bloc A, Bloc B. Cela préserve l'affichage : effet push bloc pour différentes tailles d'écran.</p></div>