[Résolu] Changer l'ordre d'affichage d'éléments sous mobile et tablett

Bonjour à tous et à toutes,
Je travaille actuellement sur une page avec 7 bulles/éléments/boutons (voir ci-dessous) :

Voici le CodePen si ça intéresse certains : https://codepen.io/spip93/pen/RwGwBRm
J'ai donc 3 lignes avec :
Sur la ligne 1, les bulles/éléments/boutons : Agenda et Bibliothèque
Sur la ligne 2, les bulles/éléments/boutons : Animations, A l'affiche et Lecture et loisirs
Sur la ligne 3, les bulles/éléments/boutons : Les salles et AGHBR

Actuellement, quand on passe sur mobile ou tablette, les bulles/éléments/boutons sont dans cet ordre :
- Agenda
- Bibliothèque
- Animations
- A l'affiche
- Lecture et loisirs
- Les salles
- AGHBR

La cliente souhaiterait que, sur mobile et tablette, les bulles/éléments/boutons soient dans cet ordre :
- Agenda
- Les salles
- Animations
- A l'affiche
- Bibliothèque
- Lecture et loisirs
- AGHBR

Comment faire ?
Après différentes recherches et d'après ce que j'ai compris, c'est possible en passant par des flexbox.
Effectivement, je suis arrivé à changer l'ordre de mes bulles/éléments/boutons, mais uniquement au sein d'une ligne.
Par exemple au sein de la ligne 2, c'est dans cet ordre :
Animations, A l'affiche et Lecture et loisirs
et je suis arrivé à mettre dans cet ordre :
Lecture et loisirs, Animations et A l'affiche

Mon problème c'est que je n'arrive pas à changer l'ordre de mes éléments quelle que soit la ligne à laquelle appartiennent mes bulles/éléments/boutons

Est-ce qu'on peut le faire en passant par des règles CSS ou est-ce qu'on doit nécessairement passer par JS ? Si oui, quel code JS mettre SVP (car là j'y connais absolument rien) ?

D'avance merci pour vos réponses.
Bonne journée

Bonjour,

Je pense qu'il ne faut pas penser en terme de "ligne", mais juste avoir dans le html tes sept éléments à la suite les uns des autres. Et ensuite, tu utilises du css. Tu as 2 choix principaux :

1) soit tu positionnes tes éléments avec des position:absolute et des left, right, top, bottom qui vont bien,

2) soit tu utilises la propriété css grid

Voir https://forum.alsacreations.com/topic-4-87580-1-Menu-circulaire-autour-dune-image.html qui traite une question assez proche de la tienne, et qui contient des exemples.

Amicalement,

Bonjour,
il y aussi la possibilité de se servir de flex et order (comme tu le tentes) , mais , dans une mediaquerie (992px) pour passer outre tes class de Bootstrap3 , en faisant disparaitre les éléments constituant les lignes et leur colonnes avec display:contents .

Voici l'idée CSS:

@media (max-width : 992px) {
  .row,
  .row>[class^=col] {
    display:contents;/* on fait virtuelement disparaitre row et div.colX */
  }
  .container {/* on en fait un conteneur flex comme ce n'est pas du bs4 */
    display:flex;
    flex-flow:column;
  }
  .row a {margin:1em auto;}/* reset du margin*/
  /* placement dans l'ordre */
  .order-1 {order:1}
  .order-2 {order:2}
  .order-3 {order:3}
  .order-4 {order:4}
  .order-5 {order:5}
  .order-6 {order:6}
  .order-7 {order:7}
}

Coté HTML, il suffit d'ajouter aux liens la class order-X correspondante.

Note: A voir comme un pansement sur ton layout construit avec bootstrap 3.

https://codepen.io/gc-nomade/pen/OJRJogj

Cdt
Modifié par gcyrillus (27 Nov 2020 - 11:41)

spip93 a écrit :
Coucou,

Merci beaucoup pour vos réponses, mais j'ai trouvé UNE solution !!
Tout passe par le HTML.
J'ai mis 2 corps/containers l'un au-dessus de l'autre.

ça me rappelle les vieux hack a coup de commentaire conditionnels dans IE .

@spip : comme dirait l'autre "tant pis ça marche", mais c'est dommage de dupliquer le contenu.