La grille 1 sous la grille 2

Bonjour,
j'utilise Knacss et j'ai un petit souci sur la refonte d'un site pour le rendre responsive;
Le site comporte 2 colonnes avec le système de grid (<div class="grid-2-1 ">),
mon souci est qu'il faudrait au redimensionnement que la 1ère colonne vienne se placer AU-DESSOUS de la deuxième colonne (<aside>).
Je n'arrive pas à faire ça, existe t'il une solution?
Merci d'avance pour vos réponses
Olivier

Bonjour,

J'ai compris que tu as un 1er conteneur qui est affiché comme une colonne à gauche suivi d'un 2e conteneur - aside - qui est affiché comme une colonne à droite.
Tu peux les réordonner en affichant leur parent comme

display: flex;
  flex-flow: column-reverse nowrap;

et tous les enfants de ce parent seront affichés de bas en haut. Tu remets width: auto; sur les 2 ex-colonnes s'ils ne reprennent pas toute la largeur du parent.
Compatibilité : IE9+ ce qui devrait être suffisant en 2016.

Solution crade : display: table-footer-group; sur la colonne de gauche. Ça la fait plonger sous tous ses frères précédents ou suivants... Tout aussi crade display: table-caption; sur la colonne de gauche qui la fait remonter au-dessus de tous ses frères.
Compatibilité : IE8+ et ça a des effets bien relous dans les lecteurs d'écran en particulier Firefox s'il y a des liens, etc Flexbox c'est fait pour ça par contre.
Modifié par Felipe (02 Sep 2016 - 10:19)