Von Haus aus bietet der Gutenberg-Editor das Einfügen von Spalten an. Diese verhalten sich auch ganz schön responsive, das heisst, dass sie schön artig untereinander dargestellt werden, sobald das nötig ist (zb mobile-Device).

Es gibt aber ein Szenario, wo wir ein wenig eingreifen müssen:

Oft haben wir in einer Spalte Text und daneben ein Bild. Und zwar rechts-links, links-rechts. Trotzdem möchten wir aber, dass in der Darstellung bei kleineren Geräten immer Text vor Bild ist (oder auch umgekehrt).

Darstellung auf grossen Bildschirmen:

Darstellung auf kleinen Bildschirmen – aber so möchten wir es nicht, denn der Text „umgekehrt 2“ sollte doch oberhalb des Bildes sein:

Darstellung nach unserer Korrektur:

Und so wird es gemacht:

Dem Spalten-Block, welcher die Spalten in umgekehrter Reihenfolge darstellen soll muss bei den Block-Optionen unter „erweitert“ eine CSS-Klasse, zb „umgekehrt“ zugeordnet werden.

Diese Klasse kann zb im Customizer bei „zusätzliches CSS“ (Spalten-Block) eingefügt werden:

@media only screen and (max-width: 768px) { 
.entry-content .umgekehrt .wp-block-column:nth-child(2) {order:1} 
.entry-content .umgekehrt .wp-block-column:first-child {order:99} 
/* oder: */
.entry-content .umgekehrt {flex-direction: column-reverse; } }

In diesem Fall ist 768px die Breite, bis zu welcher die Spalten untereinander darzustellen sind (Breakpoint) und demzufolge wenn gewünscht „umzustellen“ sind.