Comment puis-je réorganiser les éléments de bloc en utilisant uniquement CSS ?

Changement de l'ordre des éléments de bloc avec CSS

Dans ce scénario, nous recevons du code HTML dans lequel trois éléments de bloc sont disposés verticalement : Bloc A , Block B et Block C. Le défi est de réorganiser ces éléments dans un ordre spécifique en utilisant uniquement CSS, tout en préservant le display:block propriété.

À l'aide de requêtes multimédias CSS, nous pouvons appliquer de manière sélective des propriétés d'ordre aux éléments en fonction de la largeur de l'écran. Par exemple, en considérant le scénario dans lequel une publicité pour une application iPhone devrait être affichée en premier sur les appareils mobiles, nous pouvons implémenter ce qui suit :

@media only screen and (max-device-width: 480px) {
  #blockC {
    order: 1; /* Move Block C to the top */
  }
}

Maintenant, lorsque la largeur de l'écran est inférieure ou égale à 480 px, le bloc C sera rendu au-dessus du bloc A et du bloc B. Cela permet d'obtenir la réorganisation souhaitée sans compromettre le comportement de l'élément de bloc.

Voici un exemple plus détaillé utilisant le moderne CSS :

<div>

@media screen and (max-width: 300px) {
  #parent {
    display: flex;
    flex-flow: column;
  }
  #a {
    order: 2;
  }
  #c {
    order: 1;
  }
  #b {
    order: 3;
  }
}

Dans cet exemple, lorsque la largeur de l'écran est réduite à 300 px ou moins, les éléments seront réorganisés comme : Bloc C, Bloc A, Bloc B. La disposition flexbox garantit que les éléments restent sous forme de blocs, s'empilant verticalement et respectant leur hauteur et largeur naturelles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!