Comment puis-je échanger l'ordre de deux DIV en utilisant uniquement CSS ?

Échanger les positions des DIV à l'aide de CSS pur

Dans un design réactif, l'organisation dynamique des éléments peut être cruciale. Si vous cherchez un moyen d'échanger les positions de deux div uniquement via CSS, voici une solution inspirée d'une requête similaire :

Structure originale :

<div>

Résultat souhaité :

Faire apparaître le "second_div" avant le "first_div" sans modifier le HTML.

Solution :

Implémentez la requête multimédia suivante pour cibler le contexte nécessaire :

@media (max-width: 30em) {
  .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .container .first_div {
    order: 2;
  }

  .container .second_div {
    order: 1;
  }
}

Explication :

• La requête multimédia cible les appareils d'une largeur maximale de 30 em, permettant ainsi une diffusion réactive comportement.
• Dans l'élément conteneur, nous définissons l'affichage sur « flex », ce qui prend en charge la disposition des éléments horizontalement.
• Nous spécifions la direction flex comme « colonne » pour aligner les divs verticalement. .
• align-items : flex-start ; garantit que les éléments commencent au début du conteneur.
• La clé pour échanger les positions div réside dans la propriété 'order'. En définissant l'ordre : 2 ; sur .first_div, nous demandons au navigateur de l'afficher après tout autre élément d'ordre supérieur. A l’inverse, commandez : 1 ; on .second_div le positionne avant le .first_div.

Cette approche permet un échange transparent des positions DIV en utilisant uniquement CSS, répondant efficacement à la requête initiale.

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!