[RÉGLÉ] Définir ordre affichage des position d'un template

[Djeck6205]

Bonjour,

Est-ce que quelqu'un peut me dire s'il est possible de contrôler dans quel ordre vont apparaître les différentes positions définies dans un template lorsque la page est affichée sur un écran plus petit (responsive design)
Par exemple pour le template cassiopeia, est-ce qu'il est possible de dire que la position "sidebar-left" doit apparaître avant la position "main" ou "main-top" quand on passe sur un affichage réduit ? (tablette, smartphone)
Merci pour votre aide
Djeck

[woluweb]

Si on inspecte un site utilisant Cassiopeia on voit le CSS suivant :

@supports (display: grid) {
.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 ."
". 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 .";
}
@media (min-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 ."
}
}
}

C'est du CSS Grid.
(voir p ex https://css-tricks.com/snippets/css/...template-areas)

Donc si on veut p ex adapter le Layout pour avoir en vue desktop
- la Position `banner` juste après la zone Composant
- et les Positions `bot-a` et `bot-b` côte à côte plutôt que l'une au-dessus de l'autre

il suffit d'ajouter ce qui suit dans `/templates/cassiopeia/css/user.css`

@supports (display: grid) {
@media (min-width: 992px) {
.site-grid {
grid-template-areas:
". 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-b bot-b ."
". banner banner banner banner ."
}
}
}

Autrement dit, ce qui est sympa avec un Template basé sur CSS Grid, c'est qu'on peut changer un Layout (selon la taille d'écran aussi) simplement en jouant avec quelques lignes de CSS, sans devoir éditer du PHP...

PS : désolé, le forum casse un peu la mise en forme du CSS.
Pour retrouver le CSS plus lisible, il suffit d'aller voir la présentation que je suis en train de préparer pour une session que je donne demain soir (en anglais) pour le Joomla User Group New Jersey (USA) :

https://slides.woluweb.be/cassiopeia/cassiopeia.html

[Djeck6205]

Un grand merci Woluweb pour cette réponse complète, m'a été très utile !!!