[Résolu] Mise en page Flex

Bonjour
Je travaille en Flex, j'ai réussi à réaliser quelque chose, mais j’ai la nette sensation d’avoir fait un peu n’importe quoi … !
Je soumets mon travail à votre expertise afin de réaliser une mise en page propre, merci.
Pour ce header J’ai utilisé 5 divs et les rem pour définir la hauteur du header afin de positionner la div2 au milieu du header.
Souci majeur : En responsive j’aurai souhaité que la div 3 soit situé au-dessus de la div 2


Bonne journée
Modifié par africa (13 Mar 2021 - 18:11)

Bonjour,

Au moment où tu souhaites inverser la div2 et la div3, tu peux mettre leur parent commun en flex, et utiliser la propriété order pour les permuter. Avec le html de ton exemple, ça donne :

header>div:nth-of-type(2){display:flex;flex-direction:column;}
#texte {order:2;}
#montpellier {order:1;}

Amicalement,

parsimonhi a écrit :
Bonjour,

Au moment où tu souhaites inverser la div2 et la div3, tu peux mettre leur parent commun en flex, et utiliser la propriété order pour les permuter. Avec le html de ton exemple, ça donne :

header>div:nth-of-type(2){display:flex;flex-direction:column;}
#texte {order:2;}
#montpellier {order:1;}

Amicalement,

Merci
Bon weekend