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.
![](https://www.fbnfrtg.de/wp-content/uploads/2023/10/Bildschirmfoto-2023-10-13-um-20.46.22-1024x392.png)
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;
}
}
Code-Sprache: CSS (css)
Die Klasse muss anschließend nur noch über die Block-Eigenschaften der Spalten unter „Erweitert“ den Spalten zugewiesen werden.
![](https://www.fbnfrtg.de/wp-content/uploads/2023/10/Bildschirmfoto-2023-10-13-um-20.56.40-878x1024.png)
![](https://www.fbnfrtg.de/wp-content/uploads/2023/10/Bildschirmfoto-2023-10-13-um-20.53.57-774x1024.png)
Nächster Artikel