Auf dem Desktop werden Spalten korrekt dargestellt: Text links, Bild rechts. Öffnen Sie die Website auf einem Smartphone, erscheint zuerst das Bild, während die Erläuterung darunter, unterhalb des sichtbaren Bereichs, platziert wird.

Kommt Ihnen das bekannt vor? Der Grund: Auf mobilen Geräten kollabiert das gesamte Layout in eine einzelne Spalte, und die Reihenfolge der Blöcke bleibt fixiert, was im HTML-Code zuerst kommt, erscheint oben. Niemand möchte das HTML nur für Mobilgeräte ändern: Das würde doppelte Abschnitte oder unsaubere Workarounds mit display: none bedeuten.

CSS bietet ein Werkzeug, das dieses Problem ohne Eingriffe ins Markup löst: die Eigenschaft order in Kombination mit Flexbox. Eine Zeile in einer Media Query, und die Blöcke tauschen die Plätze.

💡 Kurzer Überblick:

• Wie Flexbox die Blockreihenfolge ohne HTML-Änderungen steuert
• CSS-Code zum Vertauschen zweier Spalten auf Mobilgeräten
• Wie Sie Klassen über einen Page Builder zuweisen (am Beispiel von King Composer)
• Ein fertiges Snippet: Kopieren, eigene Klassen einsetzen, testen

So funktioniert CSS order: die Grundlagen

Flexbox kann mehr als nur Elemente horizontal und vertikal ausrichten. Jedes Flex-Element besitzt eine numerische order-Eigenschaft, die seine visuelle Position unabhängig von seiner Stelle im HTML bestimmt.

Standardmäßig haben alle Elemente order: 0, daher erscheinen sie in der Reihenfolge, in der sie im Code stehen. Sobald Sie jedoch einem Block order: 1 und einem anderen order: 2 zuweisen, ordnet der Browser sie um. Die niedrigere Zahl erscheint immer zuerst.

Das Entscheidende: order funktioniert innerhalb einer Media Query. Auf dem Desktop bleiben die Blöcke in ihrer normalen Position, aber auf Bildschirmen schmaler als 768 Pixel tauschen sie die Plätze. Der HTML-Code bleibt dabei unberührt, Suchmaschinen sehen die ursprüngliche Reihenfolge, und die Barrierefreiheit wird nicht beeinträchtigt. MDN bestätigt: Die visuelle Reihenfolge ändert sich, die Tab-Reihenfolge jedoch nicht (solange Sie tabindex nicht verändern).

Beachten Sie, dass order nur innerhalb eines Flex-Containers funktioniert. Der übergeordnete Block muss display: flex oder display: inline-flex besitzen. Ohne dies wird die order-Eigenschaft ignoriert.

Schritt-für-Schritt-Anleitung: order in der Praxis anwenden

Stellen Sie sich einen typischen Abschnitt vor: zwei Spalten in einer Reihe auf dem Desktop, untereinander gestapelt auf Mobilgeräten. Das Ziel: Auf Smartphones soll die zweite Spalte (Bild) ZUERST erscheinen und die erste Spalte (Text) als ZWEITES.

Schritt 1: die HTML-Struktur vorbereiten

Das grundlegende Markup besteht aus einem Container und zwei Kind-Blöcken. Die Reihenfolge im HTML: zuerst Text, dann Bild. Genau diese Struktur erzeugen die meisten Page Builder, einschließlich King Composer.

1
<div class="section-wrapper">
2
  <div class="block-text">Текст и пояснение слева</div>
3
  <div class="block-image">Картинка справа</div>
4
</div>

Schritt 2: das CSS schreiben

Machen Sie den Container zunächst bei allen Auflösungen zu einem Flex-Container. Weisen Sie dann in der Media Query für Mobilgeräte jedem Block seine eigene order zu und dehnen Sie sie auf volle Breite aus.

Fügen Sie diesen Code unter Dashboard → Design → Customizer → Zusätzliches CSS in Ihrem Theme oder über das Plugin Code Snippets ein. Bearbeiten Sie Theme-Dateien nicht direkt, da Ihre Stile bei einem Update verloren gehen.

1
.section-wrapper {
2
    display: flex;
3
    flex-flow: wrap;
4
}
5
 
6
@media screen and (max-width: 767px) {
7
    .block-image {
8
        order: 1;
9
        width: 100%;
10
    }
11
 
12
    .block-text {
13
        order: 2;
14
        width: 100%;
15
    }
16
}

Erläuterung: Auf dem Desktop sind beide Blöcke normale Flex-Elemente mit order: 0 (dem Standardwert laut Spezifikation). Text links, Bild rechts, wie im HTML. Auf Bildschirmen schmaler als 768 Pixel greift die Media Query: .block-image erhält order: 1 und rückt damit an die erste Stelle; .block-text erhält order: 2 und rückt an die zweite Stelle. width: 100% stellt sicher, dass die Blöcke die gesamte Bildschirmbreite einnehmen.

Entscheidender Punkt: Die Klassen .block-text und .block-image sind Ihre eigene Namensgebung. In einem realen Projekt sprechen Sie die Klassen an, die Ihr Page Builder oder Theme generiert.

Schritt 3: Klassen in einem Page Builder zuweisen

Universeller Ansatz: Jeder visuelle Builder (Elementor, Bricks, das ältere King Composer, natives Gutenberg via Gruppe) erlaubt es, Abschnitten und Spalten eine benutzerdefinierte CSS-Klasse hinzuzufügen. Die folgenden Screenshots zeigen den Vorgang in der King-Composer-Oberfläche, aber die Logik ist überall gleich: Suchen Sie das Feld „CSS-Klasse" oder „Extra-Klasse" in den Zeilen-/Spalteneinstellungen und tragen Sie den gewünschten Namen ein.

Ein zweispaltiger Abschnitt in King Composer sieht so aus:

Weisen Sie dem übergeordneten Container (der Zeile) die Klasse section-wrapper zu:

Weisen Sie der linken Spalte die Klasse block-text zu:

Weisen Sie der rechten Spalte die Klasse block-image zu:

Nach dem Speichern und Veröffentlichen prüfen Sie die Seite auf einem Smartphone oder über die Browser-DevTools (F12 → Gerätesymbolleiste umschalten). Die Blöcke sollten die Plätze tauschen: Bild oben, Text darunter.

So passen Sie diese Methode für Ihr Projekt an

Drei typische Szenarien und was Sie im Code ändern müssen:

Sie verwenden einen anderen Page Builder. Suchen Sie das Feld für benutzerdefinierte CSS-Klassen in den Abschnitts-/Spalteneinstellungen. In Elementor ist es Erweitert → CSS-Klassen; in Bricks ist es Einstellungen → CSS-ID & -Klassen. Tragen Sie Ihre Klassennamen ein und aktualisieren Sie die CSS-Selektoren entsprechend.

Sie codieren von Hand ohne Page Builder. Noch einfacher: Schreiben Sie die benötigten Klassen direkt in das HTML-Markup Ihres Templates. Der CSS-Code bleibt gleich; passen Sie nur die Selektoren an Ihr Markup an.

Sie haben drei oder mehr Blöcke statt zwei. Fügen Sie in der Media Query für jeden Block eine Regel mit einem eigenen order-Wert hinzu. Beispiel: .block-a { order: 1; }, .block-b { order: 2; } und .block-c { order: 3; }. Die Zahlen müssen nicht aufeinanderfolgend sein; Sie können order: 10 verwenden, um ein Element garantiert ans Ende zu verschieben.

Stellen Sie sicher, dass der übergeordnete Container display: flex besitzt; ohne dies wird order stillschweigend ignoriert, und Sie verschwenden eine halbe Stunde mit Fehlersuche. Das häufigste Szenario: Der Container hat standardmäßig display: block, Flex wird angewendet, aber durch eine spezifischere Theme-Regel überschrieben. DevTools → Berechnet zeigt Ihnen den endgültigen Wert.

Sehen Sie sich dieses kurze Video zum Thema an, das anschaulich demonstriert, wie order Blöcke in Echtzeit umordnet:

⁉️🤔 Häufig gestellte Fragen

Funktioniert order in allen Browsern?

order wird seit 2015 von allen modernen Browsern unterstützt, einschließlich Safari auf iOS und Chrome auf Android. Laut caniuse.com-Daten beträgt die globale Flexbox-Unterstützung 99,2%. Falls Sie IE11 unterstützen müssen (er versteht Flexbox, hat aber Fehler), fügen Sie -ms-flex-order mit demselben Wert hinzu.

Beeinträchtigt order die Suchmaschinenindexierung?

Nein. Suchmaschinen-Crawler lesen das Quell-HTML der Seite, und order ändert nur die visuelle Reihenfolge im Browser. Google bestätigt: CSS-Umordnungen beeinflussen das Ranking nicht. Die ursprüngliche Reihenfolge der Inhalte im HTML bleibt unverändert.

Warum funktioniert mein order nicht?

Die drei häufigsten Gründe: (1) Der übergeordnete Block hat kein display: flex; (2) die Media Query wird durch eine spezifischere Theme-Regel überschrieben; (3) das Kindelement hat einen anderen display-Wert als block (z. B. inline). Es wird dennoch zum Flex-Element, aber das Verhalten kann abweichen. Öffnen Sie die DevTools, Tab „Elemente" → „Berechnet": Prüfen Sie, ob Ihr order angewendet und nicht durchgestrichen ist.

Kann ich die Reihenfolge mit CSS Grid statt mit Flexbox ändern?

Ja. Grid besitzt eine order-Eigenschaft, die identisch funktioniert. Darüber hinaus bietet Grid eine Alternative: Sie können grid-row und grid-column für die explizite Positionierung von Elementen ohne order setzen. Wenn Sie jedoch lediglich eine Zeile mit zwei Spalten haben, ist Flexbox einfacher (weniger Code).

Was, wenn mein Page Builder das Hinzufügen einer benutzerdefinierten Klasse nicht erlaubt?

Einige ältere oder abgespeckte Builder zeigen das Feld für CSS-Klassen nicht an. In diesem Fall: (1) Umschließen Sie den Abschnitt mit einer Gruppe und weisen Sie der Gruppe die Klasse zu; (2) verwenden Sie den eingebauten CSS-Selektor des Builders (z. B. .kc-column-12a3b für King Composer), den Sie über die DevTools finden können; (3) wechseln Sie zu Gutenberg mit einem Gruppencontainer, wo jeder Block im rechten Panel ein Feld „Zusätzliche CSS-Klasse" besitzt.

Kernpunkte zum Vertauschen der Blockreihenfolge

Die CSS-Eigenschaft order ist der einfachste Weg, die visuelle Reihenfolge von Blöcken zu steuern, ohne HTML zu bearbeiten. Die Flexibilität erreichen Sie mit drei Zeilen in einer Media Query: Setzen Sie display: flex auf den Container, weisen Sie den Kind-Blöcken am mobilen Breakpoint order: 1 und order: 2 zu, und fertig.

Der sicherste Implementierungsweg: Fügen Sie CSS über Design → Customizer → Zusätzliches CSS oder das Plugin Code Snippets hinzu; fassen Sie keine Theme-Dateien an. Testen Sie die Seite vor der Veröffentlichung über die DevTools mit einem iPhone-Emulator und auf einem echten Gerät. Wenn order nicht funktioniert, prüfen Sie zuerst den berechneten display-Wert des Containers.

Haben Sie diese Methode auf Ihrer Website ausprobiert? Teilen Sie in den Kommentaren mit, welchen Page Builder Sie verwendet haben und was Sie vertauscht haben.