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

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

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

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

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

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>

Далее контейнер объявляется как flexbox, направление вертикальное. И, наконец, порядок присваивается каждому дочернему элементу. Это позволяет, например, 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»?

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