Wie kann ich die Reihenfolge der Divs mit CSS basierend auf der Bildschirmgröße ändern?

Div-Reihenfolge mit CSS basierend auf der Gerätebreite ändern

Beim Erstellen responsiver Websites stößt man häufig auf Herausforderungen bei der Verwaltung der Reihenfolge der Elemente die Bildschirmgröße ändert sich. Während für zwei oder drei Divs einfache Lösungen existieren, wird die Reihenfolge mit zunehmender Anzahl von Elementen komplexer.

Um dieses Problem zu lösen, bietet die Flexbox-Spezifikation von CSS eine leistungsstarke Lösung unter Verwendung der Order- und Flex-Flow-Eigenschaften. Diese Eigenschaften ermöglichen eine flexible Anordnung von Elementen unter Beibehaltung ihrer Inline-Blockanzeige.

Die folgende Lösung erfüllt die in der Frage genannten Anforderungen:

• Elemente werden zunächst als Zeile angezeigt.
• Wenn die Bildschirmbreite unter einen definierten Haltepunkt fällt, wechseln sie zu einem Spaltenlayout.
• Die Reihenfolge der Elemente wird in der Spalte geändert Layout, um die gewünschte Anordnung zu erstellen.

HTML-Struktur:

<div class="container">
    <div class="one">I'm first</div>
    <div class="two">I'm second</div>
    <div class="three">I'm third</div>
    <div class="four">I'm fourth</div>
    <div class="five">I'm fifth</div>
</div>

CSS-Stile:

.container div {
    width: 100px;
    height: 50px;
    display: inline-block;
}

.one { background: red; }
.two { background: orange; }
.three { background: yellow; }
.four { background: green; }
.five { background: blue; }

@media screen and (max-width: 531px) {
    .container {
        display: flex;
        flex-flow: column;
    }
    .five { order: 1; }
    .four { order: 2; }
    .three { order: 3; }
    .two { order: 4; }
    .one { order: 5 }
}

Diese Lösung stellt sicher, dass sich die Divs basierend auf der angegebenen Reihenfolge neu anordnen, wenn die Bildschirmbreite zu schmal wird, während ihr Inline-Block-Layout beibehalten wird Beibehaltung ihres Inhalts und ihrer Dimensionen.

Das obige ist der detaillierte Inhalt vonWie kann ich die Reihenfolge der Divs mit CSS basierend auf der Bildschirmgröße ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!