Как я могу лучше всего создать этот макет с CSS? ⇐ CSS

[Anonymous]

Мне дали конструкции для работы (мобильные и настольные макеты), и мне нужно преобразовать их в HTML и CSS.

Код: Выделить всё

one
two
three
four
five

и вот как будет работать макет на мобильных/маленьких экранах:

. Немного контента, чтобы показать, насколько нерегулярными могут стать DOV). Обратите внимание на порядок dovs!

Вот CSS, которые я использовал для достижения этой компоновки:
есть CSS, которые я использовал для достижения этой компоновки:
@media (min-width:992px){
.parent{
width:100%;
display:flex;
flex-flow: column wrap;
height:400px;
}
.div{
width:50%;
}
.one{
order:0;
}
.two{
order:1;
}
.three{
order:4;
}
.four{
order:5;
}
.five{
order:3;
}
}
< /code>
Итак, вот проблема. Единственный способ, которым макет работает с Flexbox, заключается в том, что я поместил произвольную высоту 400px на родительский Div, который я не могу сделать из -за различного содержания в каждом из детей, потенциально растущих в прошлом, этот предел 400px. порядок пронумерованных DOV - один, два, три, четыре, пять в одном непрерывном столбце. столбцы. Ох, и мне тоже не разрешено использовать JavaScript.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... t-with-css