Flexbox layout

Hello !

J'ai créé ce layout en Flexbox pour une page : http://codepen.io/TheTeapot418/pen/KMzpeK
Le but est de tout basculer en une seule colonne sur mobile, en changeant l'ordre des éléments.

La hauteur de certains élément pouvant changer, pour l'instant, je dois calculer la hauteur du conteneur en JS.

Ma question est donc la suivante : est-il possible d'obtenir ce résultat sans l'aide de JS ?
Modifié par Bguigui67 (13 Jun 2016 - 08:50)

Bguigui67 a écrit :
Ma question est donc la suivante : est-il possible d'obtenir ce résultat sans l'aide de JS ?

Bien sûr! Mais vous partez à l'envers : dans une logique mobile first vous devez tout avoir sur une seule colonne au départ et redéfinir les éléments du template au fur et à mesure de l'agrandissement de la largeur disponible. Cela vous économisera des règles à reseter.

Exemples de layouts en flex :
- Complex Layout
- Layout for a Blog

Autre chose à propos de votre javascript : hormis le fait qu'il est innutile pour définir votre template, j'ai remarqué que vous utilisez les nouvelles variables javascript, telles que 'let'. Attention : si ce nouveau type de variable est bien supporté par les navigateurs récent j'ai remarqué qu'il ne l'était pas tout sur certaines configurations, notamment WindowsXP.
Modifié par Olivier C (13 Jun 2016 - 09:28)

Merci pour ces liens.
Dans mon cas, la compatibilité WinXP n'est pas requise.