Wie kann ich die Reihenfolge zweier DIVs nur mit CSS vertauschen?

DIV-Positionen mit reinem CSS austauschen

Beim responsiven Design kann die dynamische Anordnung von Elementen von entscheidender Bedeutung sein. Wenn Sie nach einer Möglichkeit suchen, die Positionen zweier Divs ausschließlich über CSS auszutauschen, finden Sie hier eine Lösung, die von einer ähnlichen Abfrage inspiriert ist:

Originalstruktur:

<div>

Gewünschtes Ergebnis:

Das „second_div“ soll vor dem „first_div“ erscheinen, ohne Ändern des HTML.

Lösung:

Implementieren Sie die folgende Medienabfrage, um auf den erforderlichen Kontext abzuzielen:

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

  .container .first_div {
    order: 2;
  }

  .container .second_div {
    order: 1;
  }
}

Erklärung:

• Die Medienabfrage zielt auf Geräte mit einer maximalen Breite von 30em ab und ermöglicht so effektiv Reaktionsverhalten.
• Innerhalb des Containerelements setzen wir die Anzeige auf „Flex“, was die horizontale Anordnung der Elemente unterstützt.
• Wir geben Flex-Richtung als „Spalte“ an, um die Divs auszurichten vertikal.
• align-items: flex-start; Stellt sicher, dass die Elemente am Anfang des Containers beginnen.
• Der Schlüssel zum Vertauschen der Div-Positionen liegt in der Eigenschaft „order“. Durch Einstellungsreihenfolge: 2; Bei .first_div weisen wir den Browser an, es nach allen anderen Elementen mit einer höheren Ordnung anzuzeigen. Umgekehrt: Reihenfolge: 1; on .second_div positioniert es vor .first_div.

Dieser Ansatz ermöglicht einen nahtlosen Austausch von DIV-Positionen nur mit CSS, wodurch die anfängliche Abfrage effektiv bearbeitet wird.

Das obige ist der detaillierte Inhalt vonWie kann ich die Reihenfolge zweier DIVs nur mit CSS vertauschen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!