13. Oktober 2023

Reihenfolge der Spalten im Gutenberg-Editor mobil ändern.

Ein häufig verwendeter Design-Aufbau im Web ist: „Text links, Bild rechts“. Dieser Aufbau lässt sich auch im Gutenberg-Editor in WordPress sehr leicht umsetzen.

Das Problem hierbei ist, dass das Bild in der mobilen Ansicht, standardmäßig unter dem Text ist. Mit folgendem CSS lässt sich die Reihenfolge der Spalten ändern:

@media (max-width: 768px) {
    .reverse-mobile {
        flex-direction: column-reverse;
    }
}

Die Klasse muss anschließend nur noch über die Block-Eigenschaften der Spalten unter „Erweitert“ den Spalten zugewiesen werden.