Existe-t-il un moyen de séparer un élément enfant unique d'une boîte flexible ?

Question

Le scénario : j'ai un div#wrapper avec le css suivant :

div#wrapper {
    display: box;
    box-orient: horizontal;
    width: 100%;
}

Ce wrapper contient trois enfants <section> éléments que, par souci de clarté, nous appellerons sections A, B et C. Il me reste donc quelque chose comme ceci :

Magnifique. Voilà le problème : Je travaille actuellement sur les requêtes média et je dois modifier cette mise en page lorsqu'elle est < 800px. Plus précisément, je dois déplacer la section B sous les sections A et C et la rendre pleine largeur. Voici un graphique pour vous aider à comprendre :

La question : Est-il possible de sortir un seul élément enfant de sa boîte flexible et de modifier la mise en page de cette façon ?

Answer 1

Les spécifications de Flexbox sont en constante évolution. Selon les recommandations actuelles, vous pouvez utiliser un fichier de type conteneur souple avec enveloppement des rangées définissez la largeur des sections de manière à ce que seules deux d'entre elles tiennent dans le wrapper, puis utilisez la commande commander de mettre la section B à la fin :

http://jsfiddle.net/LYnRf/ (testé avec Chrome 22 sous Windows)