Flexbox: как изменить порядок и направление одновременно?

Question

У меня 3 дивы, которые правильно отображать один рядом с другим, по горизонтали, например, так:

div0 div1 div2 

Когда ширина медиа меньше, чем 600px, я бы очень похож на дивы, который будет отображаться следующим образом:

div0 div2 
    div1 

Сейчас я мог только управлять, чтобы получить это:

div0 
div2 
div1 

я изменил направление и порядок, как так:

.wrapper { 
     flex-direction: column; 
     } 
     .div1 { 
     -webkit-order: 3; 
     order: 3; 
     } 
} 

Я понимаю, почему он не может дать желаемый результат, но я понятия не имею, куда идти оттуда. Я полагаю, что это связано с flex-wrap, но я не уверен.

---

Вот plunk этой проблемы.

Я полагаю, что для некоторых это должно быть тривиально, но я очень новичок в FlexBox.

Благодарим за помощь.

Answer 1

Хитрость заключается в том не изменить flex-flow свойство, так как за счет перехода к колонке, вы защитите элементы из расположены бок о бок, как вы хотели. Если у вас есть более близкий взгляд на ваш желаемый макет, он все равно будет строка, поэтому flex-flow: row должен оставаться (по умолчанию он не объявлен, поэтому мы просто не обновляем его как column).

Решение состоит в том, чтобы разрешить обертывание, используя вместо этого flex-wrap: wrap. Элементы Flex по умолчанию отключены, но вы можете включить это. Для обеспечения того, чтобы .div0 и .div2 оставались в первой строке, присваивалось значение flex-basis, которое суммируется до 100%. Я использовал 50% для каждого, так как вы не указали, как должна относиться их относительная ширина.

@media all and (max-width: 600px) { 
     .wrapper { 
     flex-direction: row; 
     flex-wrap: wrap; 
     } 
     .div0, .div2 { 
     flex-basis: 50%; 
     } 
     .div1 { 
     -webkit-order: 3; 
     order: 3; 
     flex-basis: 100%; 
     } 
} 

Смотрите рабочую демо: http://plnkr.co/edit/1gv0oPASUcGbK70Gn55k?p=preview