Discussion :

[MinceNico]

Bonjour,

J'ai un problème avec un simple design bootstrap (V4). Je n'y arrive pas et je ne trouve pas de solution sur le web (pourtant je pense que c'est un problème souvent rencontré... je dois mal m'y prendre)

Voici ce que je souhaite :


En gros c'est un design 2 colonnes tout simple avec menu à gauche. La zone 4, c'est la zone de contact, donc je ne souhaite pas l'afficher avant la zone 2.
Attention : le problème c'est que la zone 2 est très grande.

Merci par avance,

[Invité]

Bonjour,

Non, ce n'est pas "courant".
Ni le fonctionnement "normal" des flexbox.

Si je me réfère à la structure donnée dans un autre post, tu n'avais pas "2 colonnes", mais "4 blocs, disposés sur 2 colonnes".
"2 colonnes", c'est 1 colonne avec 3 blocs, et une autre avec 1 bloc.
C'est très différents.
Et toute ta problématique vient de là.

[MinceNico]

Bonjour,

oui c'est ca.
Bootstrap V4 est en mobile first. Donc j'arrive à mettre mes blocs en Z1, Z2, Z3, Z4.
Coté Desktop, j'arrive à faire le design également avec 1 ligne, 2 colonnes. Et dans la première colonne, une nouvelle ligne pour mes 3 blocs.
Mais je n'arrive pas à réorganiser en mobile pour que la Zone4 (partie contact) soit après la zone 2.

Je vais peut être voir une solution de contournement en modifiant mon interface.
Edit : Par exemple : 2 blocs contact et l'un s'affiche sur mobile et l'autre sur Desktop. Mais je ne sais pas si c'est "propre"

[NoSmoking]

Bonjour,

Mais je n'arrive pas à réorganiser en mobile pour que la Zone4 (partie contact) soit après la zone 2.

regarde du coté de la propriété order des flex item.

[Invité]

@NoSmoking.
Non. Déjà fait :

• les blocs 1 et 2 prennent la même hauteur,
• les blocs 3 et 4 passent en dessous.

...2 blocs contact et l'un s'affiche sur mobile et l'autre sur Desktop...

C'est ce que j'aurais fait.

Sinon, il faudrait sans doute passer par JavaScript, pour positionner dynamiquement (en absolute ?) les blocs 3 et 4 sous le 2...
Ça me fait penser aussi à :

• Masonry / Packery

[MinceNico]

Merci pour vos réponses,
Effectivement order ne fonctionne pas car j'ai plusieurs row.

Je vais regarder les autres solutions.