Как получить элементы в flexbox по вертикали?

Question

Я разрабатываю макет с мобильным первым подходом с семью элементами.

На большом экране я хочу заказать их по-другому, ведьма отлично работает.

Но возможно ли охватить элемент по вертикали в строке flexbox?

Элемент, который я хочу использовать, - это элемент 6, который будет иметь высоту, которая может сильно различаться (т. Е. Я хочу охватить элемент 6 над элементами 2 и 4).

Смотрите эту скрипку http://jsfiddle.net/lellky/tvbrty83/

Это контейнер элемент

.product-description { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    flex-flow: row wrap; 
} 

И это код для одного пункта:

.product-description .item-1 { 
    order: 1; 
    width: 67%; 
    background-color: khaki; 
} 

Answer 1

Я не думаю, что это возможно с Flexbox , Единственное, что вы можете сделать, это гнездо элемент 4 в элемент 2.

Обходной будет использовать отрицательный запас на поле, которое вы хотите, чтобы охватить:

.product-description .item-6 { 
    background-color: lightsalmon; 
    margin-bottom: -160px; 
} 

Вы можете сделать это с помощью JS, как это :

$('.item-6').css('margin-bottom', $('.item-4').outerHeight() * (-1)); 

посмотреть здесь: jsfiddle

Но помните, что вы должны сделать это на каждом окне изменения размера.