In der Doku erklären Sie die Anpassung von Modulfeldern an die entsprechende Browsergröße.
Mit den Klasssen "col-lg-6 col-md-8 col-sm-12" wird der Text bei mobilen Geräten besser lesbar gemacht.

Ich habe versucht, das in meiner Site anzuwenden, wobei ich hier kein einzelnes Modul habe, das ich anpassen müsste, sondern die gesamte "Content Section", die bei mir das "Sidebar Menu" enthält und die "Component Area".
Ich habe also die o.g. Klassen in der gesamten Sektion eingetragen, erhalte aber in der mobilen Ansicht nicht das erhoffte Ergebnis.

Auf dem Desktop habe ich die gewünschte volle Ansicht der Sidebar und des Contents nebeneinander.

Doch in der mobilen Ansicht habe ich die Sidebar oben und den Content unterhalb der Sidebar.

Wie kann ich erreichen, dass auch in der mobilen Ansicht die Sidebar und der Content nebeneinander sind?

gemeinde-christi.net/_test_ARCHIV/index..../mfz-archiv/mfz-2021

Hallo,
die mobile Ansicht von Sektionen und Modulen konfigurieren sie bitte über die Sektion selbst.

Ihren Code benutzt man lediglich um ein Module, was auf 100% ist in die Mitte zu setzen bei einer Modulbreite von 50%.
Ist etwas komplex, bitte lesen sie hierzu die Bootstrap Grid Doku.
getbootstrap.com/docs/4.5/layout/grid/

Ja, man muss sich wohl mit der Struktur des Astroid länger beschäftigen... aber, es lohnt sich.
Ich bin nun drauf gekommen, wie ich mein Anliegen lösen konnte.

Ich habe im Layout die "Content Section" so bearbeitet, dass ich nur noch eine Zeile und zwei Spalten mit einem Gitter von 4 + 8 habe (Sidebar Menu und Component Area).

In der Spalte "Sidebar Menu" habe ich dann die Spaltenbearbeitung aufgerufen.

und unter "Benutzerdefinierte Klasse" diese Syntax eingetragen: col-lg-4 col-md-4 col-sm-4
und in der rechten Spalte "Component Area" diese Syntax: col-lg-8 col-md-8 col-sm-8

Nun habe ich bei den meisten Endgeräten das Sidebar links und den Inhalt rechts (statt unterhalb der Sidebar. Einzige Ausnahme: Smartphone in hochkant.