Посмотрите на эту страницу дизайн сайта, которым я владею и управляю:

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

Как видите, это касается классического двухколоночного макета. Порядок вещей важен. Например, прямо рядом с фотографией вы можете увидеть, к какому виду это относится.

Сейчас я пишу адаптивный дизайн для этого сайта и сталкиваюсь с проблемой. Представьте себе эту страницу в узком окне смартфона. Классическая стратегия будет просто "стек» правый столбец ниже левого и позволяет пользователям прокручивать по вертикали. Однако это далеко от идеала с точки зрения упорядочения элементов. 'породы» Блок будет находиться под фотографией, пользователям сначала нужно будет прокрутить такие вещи, как комментарии, прежде чем они смогут увидеть связь между фотографией и образцом.

Я пытаюсь решить эту проблему, и эта статья, которая объясняет CSSФлексбокс как возможное решение звучит очень многообещающе:

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

Идея здесь в том, что, используя только CSS, можно изменить визуальный порядок элементов, именно то, что мне нужно. К сожалению, с тех пор я узнал, что статья использует устаревшую спецификацию и что новая спецификация едва поддерживается любым браузером:

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

Этот вид разрушает это для меня. Тем не менее, яЯ все еще хотел бы задать свой вопрос на концептуальном уровне:

Все демонстрации, которые я видел относительно flexbox, имеют такую простую разметку:

Далее контейнер объявляется как flexbox, направление вертикальное. И, наконец, порядок присваивается каждому дочернему элементу. Это позволяет, например, child2 быть перемещенным выше child1, используя одну инструкцию CSS.

Сейчас здесьС вопросом. Что если фактическая разметка является более сложной в том смысле, что в игре присутствуют дополнительные иерархии? Пример:

Как вы можете видеть, эта разметка имеет дополнительные иерархии, фактические блоки содержимого, которые необходимо переупорядочить, не являются прямыми дочерними элементами контейнера самого высокого уровня. Они дети, но не прямые дети.

Может ли flexbox и переупорядочение дочерних элементов работать в таком сценарии? Мог бы напримерcontent5" быть перемещенным междуContent1" а также "Content2" ?

Независимо от плохой поддержки браузера, яЯ пытаюсь концептуально понять, будет ли это поддерживаться. Причина, по которой я спрашиваю, заключается в том, что дополнительные иерархии столбцов чрезвычайно распространены в разметке, и было бы совершенно плохо, если бы переупорядочивание flexbox работало только на прямых потомках.