Hallo,
Du kannst folgenden Code in deiner user.css einfügen:
@media (max-width: 991px) {
.site-grid {
grid-template-areas:
". banner banner banner banner ."
". top-a top-a top-a top-a ."
". top-b top-b top-b top-b ."
". side-r side-r side-r side-r ."
". comp comp comp comp ."
". side-l side-l side-l side-l ."
". bot-a bot-a bot-a bot-a ."
". bot-b bot-b bot-b bot-b ."
}
}Vielen Dank !
Kannst Du mir erklären was das macht ?
Für mich sieht das ja so gar nicht nach einer "Positionierung" aus.
Hast du es gar nicht versucht ?
Es bringt die Module die sich auf der Position "Left" befinden vor den Beiträgen statt nach den Beiträgen.
Du musst dieser code in deine user.css einfügen, im Moment sehe ich nichts !
Die Frage zielt dahin das ich es verstehen möchte.
Habe ich doch erklärt im #4
Vielleicht findest du aber eine bessere Lösung.
Du musst der code ganz unten einfügen in deiner user.css !
Sorry, hier der angepasste Code: (der oben war eigentlich für die Position Rechts)
Dieser einfügen:
@media (max-width: 991px) {
.site-grid {
grid-template-areas:
". banner banner banner banner ."
". top-a top-a top-a top-a ."
". top-b top-b top-b top-b ."
". side-l side-l side-l side-l ."
". comp comp comp comp ."
". side-r side-r side-r side-r ."
". bot-a bot-a bot-a bot-a ."
". bot-b bot-b bot-b bot-b ."
}
}ahhh. jetzt klappt es !
Vielen Dank ! Jetzt muss ich nur noch verstehen wie es funktioniert 
Oh man.. spannend was CSS alles kann !
...Vielen Dank ! Jetzt muss ich nur noch verstehen wie es funktioniert
Zum Beispiel hier:
In deiner /media/templates/site/cassiopeia/css/template.min.css ist unter anderem der nachfolgende CSS-Code :
@supports (display: grid) {
.site-grid {
grid-gap: 0 1em;
grid-template-columns: [full-start] minmax(0, 1fr)[main-start] repeat(4, minmax(0, 19.875rem))[main-end] minmax(0, 1fr)[full-end];
grid-template-areas: ". banner banner banner banner ."
". top-a top-a top-a top-a ."
". top-b top-b top-b top-b ."
". comp comp comp comp ."
". side-r side-r side-r side-r ."
". side-l side-l side-l side-l ."
". bot-a bot-a bot-a bot-a ."
". bot-b bot-b bot-b bot-b .";
display: grid;
}
.site-grid > [class^="container-"], .site-grid > [class*=" container-"] {
column-gap: 1em;
width: 100%;
max-width: none;
}
.site-grid > .full-width {
grid-column: full-start / full-end;
}
@media (width >= 992px) {
.site-grid {
grid-template-areas: ". banner banner banner banner ."
". top-a top-a top-a top-a ."
". top-b top-b top-b top-b ."
". side-l comp comp side-r ."
". bot-a bot-a bot-a bot-a ."
". bot-b bot-b bot-b bot-b .";
}
}
}In diesem wird unter anderem festgelegt in welcher Reihenfolge die verschiedenen Positionen angeordnet werden sollen und welche Positionen nebeneinander angeordnet werden sollen.
Ab 992px eben das Nebeneinander .side-l comp comp side-r."
Siehe z.B.:
Grid, positions and chromes - Cassiopeia Demo
Und somit unter 992px (nachfolgend obiges auszugsweise) :
". comp comp comp comp ."
". side-r side-r side-r side-r ."
". side-l side-l side-l side-l ."Also nach der Komponentenausgabe wird die side-r und darunter side-l angeordnet.
Alles in bis zu 4 Spalten.
Dies wird mit dem Code in #8 wie von dir gewünscht geändert.