Réactivité sur quatre colonnes à deux colonnes

Question

Je crée un site Web réactif avec quatre colonnes. Quand l'écran se rétrécit, j'aimerais que les quatre colonnes se transforment en deux colonnes. Cependant, lorsque la colonne deux est plus courte que la colonne un, cette approche échoue, la colonne 3 est inférieure à 2 et il y a un écart énorme avant de voir la colonne 4 sous la colonne 1. Y a-t-il moyen de ne pas utiliser CSS? Je ne veux pas ajouter un élément HTML supplémentaire, cependant si je le peux.

http://jsfiddle.net/ACJHg/

Answer 1

Il suffit d'ajouter clear: left à votre troisième colonne (en utilisant .fourcolumn:nth-child(3)) ou colonnes impaires en général (en utilisant .fourcolumn:nth-child(2n+1))

demo

[En outre, il serait préférable de commencer par la écran étroit, puis aller à l'écran plus large (première approche mobile) et use em based media queries instead of px based ones (pour empêcher la mise en page de se casser lorsque l'utilisateur zoome)]