Schauen Sie sich das Seitendesign einer Website an, die ich besitze und betreibe:

http://www.jungledragon.com/image/9472/barn_owl_close-up.html

Wie Sie sehen, handelt es sich um ein klassisches zweispaltiges Layout. Die Reihenfolge der Dinge ist wichtig. Beispielsweise können Sie direkt neben dem Foto sehen, um welche Art es sich handelt.

Ich programmiere jetzt ein responsives Design für diese Site und stelle mich einer Herausforderung. Stellen Sie sich diese Seite in einem schmalen Smartphone-Ansichtsfenster vor. Die klassische Strategie wäre, einfach die rechte Spalte unter der linken zu "stapeln" und den Benutzern einen vertikalen Bildlauf zu ermöglichen. Dies ist jedoch in Bezug auf die Reihenfolge der Elemente alles andere als ideal. Der Specie-Block würde sich weit unterhalb des Fotos befinden. Benutzer müssten zuerst durch Dinge wie Kommentare scrollen, bevor sie die Beziehung zwischen dem Foto und der Specie sehen können.

Ich versuche das zu lösen, und dieser Artikel, in dem die Flexbox von CSS als mögliche Lösung erklärt wird, klang sehr vielversprechend:

http://www.jordanm.co.uk/post/21863299677/building-with-content-choreography

Die Idee dabei ist, dass man nur mit CSS die visuelle Reihenfolge der Elemente ändern kann, genau das, was ich brauche. Leider habe ich seitdem erfahren, dass der Artikel die veraltete Spezifikation verwendet und dass die neue Spezifikation von keinem Browser unterstützt wird:

http://css-tricks.com/old-flexbox-and-new-flexbox/

Diese Art von ruiniert es für mich. Trotzdem möchte ich meine Frage auf konzeptioneller Ebene stellen:

Alle Demos, die ich in Bezug auf Flexbox gesehen habe, haben ein so einfaches Markup:

<div id="somecontainer">
  <div id="child1"></div>
  <div id="child2"></div>
</div>

Als nächstes wird der Container als Flexbox in vertikaler Richtung deklariert. Schließlich wird jedem untergeordneten Element eine Reihenfolge zugewiesen. Auf diese Weise kann beispielsweise child2 mit einer einzigen CSS-Anweisung über child1 verschoben werden.

Hier ist die Frage. Was ist, wenn das eigentliche Markup in dem Sinne komplexer ist, dass zusätzliche Hierarchien vorhanden sind? Ein Beispiel:

<div id="somecontainer">

  <div id="colmain">

    <div id="content1"></div>
    <div id="content2"></div>
    <div id="content3"></div>

  </div>

  <div id="colside">

    <div id="content4"></div>
    <div id="content5"></div>
    <div id="content6"></div>

  </div>

</div>

Wie Sie sehen, verfügt dieses Markup über zusätzliche Hierarchien. Die tatsächlich neu anzuordnenden Inhaltsblöcke sind keine direkten untergeordneten Elemente des Containers der höchsten Ebene. Sie sind Kinder, aber keine direkten Kinder.

Könnten Flexbox und die Neuordnung von untergeordneten Elementen in einem solchen Szenario funktionieren? Könnte zum Beispiel "content5" zwischen "content1" und "content2" verschoben werden?

Ungeachtet der schlechten Browserunterstützung versuche ich konzeptionell zu verstehen, ob dies unterstützt wird. Der Grund, den ich frage, ist, dass die zusätzlichen Spaltenhierarchien im Markup extrem häufig vorkommen und dass es völlig schade wäre, wenn die Flexbox-Neuordnung nur für direkte untergeordnete Elemente funktioniert.