[Résolu] Changer l'ordre d'une série d'éléments en CSS uniquement

Bonjour à tous et à toutes,

(Pour faire court) J'ai une série d'éléments (des DIV en l'occurrence) qui sont dans un certain ordre :
Élément 1
Élément 2
Élément 3
Élément 4
Élément 5
Élément 6
Élément 7
Je souhaiterait qu'ils apparaissent dans cet ordre :
Élément 1
Élément 3
Élément 4
Élément 5
Élément 6
Élément 7
Élément 2
Autrement dit, je souhaiterai que l'Élément 2 passe en dernière position.

Problème (de taille) : Je n'ai pas accès au code HTML (ça serait trop simple), mais uniquement au code CSS
D'où ma question : Comment changer l'ordre d'une série d'éléments en CSS uniquement ?

Je vous remercie par avance pour votre aide.
Bonne journée

P.S : J'ai essayé avec un transformation : translateY(660px), ça déplace bien l'Élément 2, mais l'Élément 3 ne prend pas la place de l'Élément 2
Modifié par spip93 (15 Oct 2019 - 15:49)

Le plus simple c'est d'utiliser flexbox :
https://developer.mozilla.org/fr/docs/Web/CSS/order

(ton conteneur parent doit être en display: flex; comme dans l'exemple plus bas dans la page)

@bacasable
Ça fonctionne, merci, sauf que ça me fait sauter toute ma mise en page.
Une idée sur la raison et (surtout) comment résoudre le problème ?

@Jean-Pierre
Je t'envoie l'URL en MP
Modifié par spip93 (16 Oct 2019 - 11:04)

C'est bon, j'ai résolu le problème.
L'élément parent n'était pas sur toute la largeur avec une valeur en pourcentage, mais une valeur en pixels. C'est maintenant sur toute la largeur.
Ensuite, j'ai mis un margin-top et un margin-left.
C'est loin d'être propre (ça reste de la bidouille), mais ça fait le job

spip93 a écrit :
C'est loin d'être propre (ça reste de la bidouille), mais ça fait le job

Hello,

Qu'est-ce qui t'a empêché d'utiliser la solution proposée par bacasable qui est de loin la plus propre pour ce job ?
(ce n'est pas ironique, j'aimerais vraiment savoir)

@Raphael

spip93 a écrit :
@bacasable
Ça fonctionne, merci, sauf que ça me fait sauter toute ma mise en page.
Une idée sur la raison et (surtout) comment résoudre le problème ?

Jean-Pierre-Bruneau a écrit :

Alors bien sur sur tablette ou pire, sur portables c'est un désastre.

... Ou tout simplement si l'utilisateur change sa taille de police, ce qui est bien plus fréquent qu'on ne le pense

La propriété "order" effectue parfaitement ce boulot, je le répète.

spip93 a écrit :

Ça fonctionne, merci, sauf que ça me fait sauter toute ma mise en page.

Oui justement, c'est bien ce que j'aimerais comprendre. Mais c'est difficile de deviner ce qui est cassé sans aucun indice.
Modifié par Raphael (17 Oct 2019 - 09:58)

(Désolé de ne répondre que maintenant, j'étais pas mal occupé )
J'en conviens que c'est un bazar pas possible.
C'est dû au fait que la boite où je travaille fournit des portails aux clients. Ce type de portails d'entrée de gamme propose assez peu de personnalisation.
La seule façon pour le client (et les personnes du support qui répondent aux demandes des clients) de personnaliser les choses c'est d'entrer du code CSS personnalisé (comme sur beaucoup de thèmes WordPress) via une sorte de B.O. (quand ils s'y connaissent un peu en CSS).
Du coup, on se retrouve à avoir des !important de partout avec des règles qui s'annulent ou font doublon...
C'est aussi pour ça que j'ai pas voulu y mettre mon nez dedans (par manque de temps et de motivation aussi). D'autant, qu'à la base, c'était pour rendre service à ma collègue du support.