Comment puis-je réorganiser les éléments de bloc HTML en utilisant uniquement des requêtes CSS et multimédia ?

Réorganisation des éléments de bloc avec CSS

Votre objectif est de réorganiser l'ordre des éléments de bloc HTML en utilisant uniquement CSS tout en préservant l'effet "push" de l'affichage : propriété block.

CSS Media Query for Mobile Optimisation

Pour répondre aux utilisateurs mobiles, vous pouvez utiliser une requête multimédia CSS pour modifier l'ordre des blocs en fonction de la taille de l'écran :

@media only screen and (max-device-width: 480px) {
   #blockC {
      /* Add CSS rules to change the order here */
   }
}

Exemple de mise en œuvre

Pour démontrer, considérons l'exemple suivant :

<div>

En ajoutant les règles CSS suivantes à la requête multimédia, vous pouvez changer l'ordre des blocs pour les écrans mobiles :

@media only screen and (max-device-width: 480px) {
   #blockC {
      order: 1;
   }

   #blockA {
      order: 2;
   }

   #blockB {
      order: 3;
   }
}

Manipulation des commandes avec Flexbox

Pour une solution plus polyvalente, vous pouvez utiliser Propriétés Flexbox :

<div>

@media screen and (max-width:300px) {
   #parent{
      display:flex;
      flex-flow: column;
   }

   #a{order:2;}
   #c{order:1;}
   #b{order:3;}
}

Cette approche vous permet de changer l'ordre des éléments en modifiant la propriété order au sein de la requête multimédia. La propriété flex-flow: column garantit que les éléments s'empilent verticalement sur des écrans plus petits.

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!