[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)

Voici une solution utilisant la seconde proposition de parsimonie

<section class="conteneur">
  <div>Agenda</div>
  <div>Bibliothèque</div>
  <div>Animations</div>
  <div>À l’affiche</div>
  <div>Lecture et loisirs</div>
  <div>Les salles</div>
  <div>AGHBR</div>
</section>
  

.conteneur {
  background:violet;
  display:flex;
  flex-flow:wrap;
  width:100%;
}

.conteneur > div {
  flex:1 0 auto;
  text-align:center;
  height:200px;
  width:50%;
}

.conteneur > div:nth-of-type(3),
.conteneur > div:nth-of-type(4),
.conteneur > div:nth-of-type(5) {
  width:33%;
}

@media (max-width:1000px) {
  .conteneur > div:nth-of-type(2){
    order:5;
    width:33%;
  }
  .conteneur > div:nth-of-type(3){
    order:3;
  }
  .conteneur > div:nth-of-type(4){
    order:4;
  }
  .conteneur > div:nth-of-type(5){
    order:6;
    width:50%;
  }
  .conteneur > div:nth-of-type(6){
    order:2;
  }
  .conteneur > div:nth-of-type(7){
    order:7;
  }
  
}

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.

Le premier corps/container, visible uniquement sur ordinateur, a pour classes :

container desktop hidden-sm hidden-xs

et a les boutons dans cet ordre :
- Agenda
- Bibliothèque
- Animations
- A l'affiche
- Lecture et loisirs
- Les salles
- AGHBR

Le second corps/container, visible sur mobile et tablette, a pour classes :

container mobile visible-sm visible-xs

et a les boutons dans cet ordre :
- Agenda
- Les salles
- Animations
- A l'affiche
- Bibliothèque
- Lecture et loisirs
- AGHBR

C'est assez simple comme solution, mais je suis content d'y avoir pensé . Je ne pensais pas que ça fonctionnerait.
Ceci dit, merci beaucoup pour vos solutions , je vais (quand même) les tester.
J'espère que ça en aidera d'autres.
Bonne journée
Modifié par spip93 (27 Nov 2020 - 12:11)

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.