Посмотрите на этот дизайн страницы сайта, который я владею и запускаю:
http://www.jungledragon.com/image/9472/barn_owl_close-up.html
Как вы можете видеть, это касается классического двухколоночного макета. Порядок вещей важен. Например, вы можете видеть непосредственно рядом с фотографией, что это касается.
Теперь я кодирую отзывчивый дизайн для этого сайта и сталкиваюсь с проблемой. Представьте себе эту страницу в узком окне просмотра смартфонов. Классической стратегией было бы просто "складывать" правый столбец ниже левого и позволить пользователям прокручивать по вертикали. Однако это далеко не идеально с точки зрения упорядочения элементов. Блок "specie" будет ниже под фотографией, пользователи сначала должны прокручивать такие вещи, как комментарии, прежде чем они смогут увидеть взаимосвязь между фотографией и изображением.
Я пытаюсь решить эту проблему, и эта статья, в которой объясняется CSS flexbox как возможное решение, звучала очень многообещающе:
http://www.jordanm.co.uk/post/21863299677/building-with-content-choreography
Идея здесь заключается в том, что только с использованием CSS можно изменить визуальный порядок элементов, именно то, что мне нужно. К сожалению, с тех пор я узнал, что статья использует устаревшую спецификацию и что новая спецификация почти не поддерживается любым браузером:
http://css-tricks.com/old-flexbox-and-new-flexbox/
Этот вид руин для меня. Тем не менее, я все еще хотел бы задать свой вопрос на концептуальном уровне:
Все демонстрации, которые я видел относительно flexbox, имеют разметку так же просто, как это:
<div id="somecontainer">
<div id="child1"></div>
<div id="child2"></div>
</div>
Затем контейнер объявлен как гибкая, вертикальная по направлению. И, наконец, каждому дочернему элементу присваивается ордер. Это позволяет, например, child2 перемещаться выше child1, используя один оператор CSS.
Теперь вот вопрос. Что делать, если фактическая разметка более сложна в том смысле, что в игре есть дополнительные иерархии? Пример:
<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>
Как вы можете видеть, эта разметка имеет дополнительные иерархии, фактические блоки содержимого, подлежащие переупорядочению, не являются прямыми дочерними элементами контейнера наивысшего уровня. Это дети, но не прямые дети.
Может ли flexbox и переупорядочение дочерних элементов работать в таком сценарии? Можно ли, например, "content5" перемещаться между "content1" и "content2"?
Независимо от плохой поддержки браузера, я пытаюсь концептуально понять, будет ли это поддерживаться. Причина, по которой я спрашиваю, заключается в том, что дополнительные иерархии столбцов чрезвычайно распространены в разметке, и это полностью сосало бы, если переупорядочение переборки было бы работать только на прямых дочерних элементах.
