Использование порядка Flexbox с строками Bootstrap

Question

Я пытаюсь настроить порядок укладки столбцов в двух строках начальной загрузки. У меня две строки, каждая с двумя столбцами. В моем примере JSBin ниже, я пытаюсь уложить заказ на телефоне на вещь, вещь b, вещь d и вещь c.

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

https://output.jsbin.com/wixogafebe/

Answer 1

Для свойства гибкого order работать, все гибкие элементы должны быть братьями и сестрами в том же контейнере.

В вашем случае у вас есть один гибкий контейнер (.flex) с двумя предметами изгиба (.row).

один гибкий элемент содержит А и В. Другой гибкий элемент имеет С и D.

Под текущей настройки, только гибкие элементы (.row) может быть повторно заказан с order собственности.

Фактически, A, B, C, D не являются даже гибкими элементами, поскольку их родительский элемент не является гибким контейнером. Поэтому свойства flex не будут применяться к ним.

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

Пример:

HTML

<div class="container"> 

    <div class="col-lg-8 col-xs-12 a">  <!-- flex item #1 --> 
     <div class="thing"> 
      Thing A 
     </div> 
    </div> 

    <div class="col-lg-4 col-xs-12 b">  <!-- flex item #2 --> 
     <div class="thing"> 
      Thing B 
     </div> 
    </div> 

    <div class="col-lg-8 col-xs-12 c">  <!-- flex item #3 --> 
     <div class="thing"> 
      Thing C 
     </div> 
    </div> 

    <div class="col-lg-4 col-xs-12 d">  <!-- flex item #4 --> 
     <div class="thing"> 
      Thing D 
     </div> 
</div> 

CSS

.container { 
    display: flex; 
    flex-wrap: wrap; 
} 

.col-xs-12 { 
    display: flex; 
    flex: 0 0 50%; 
} 

.thing { 
    background-color: #eaeaea; 
    flex: 1; 
    margin: 10px; 
    padding: 15px; 
} 

@media screen and (max-width: 800px) { 

    .a { order: 1; } 
    .b { order: 2; } 
    .c { order: 4; } 
    .d { order: 3; } 
    .b > div { background-color: red; } 

} 

DEMO

Answer 2

Вы можете только order гибкие элементы в пределах их гибкого контейнера - не через несколько контейнеров.

a и b находятся в правильном порядке в пределах их контейнера здесь уже, так что не нужно возиться с ними. Только нуждается в вашей второй ряд, чтобы быть гибким контейнер, и только элемент c должен быть помещен в спину:

.row-2 { /* I added that class to your second .row element, but applying 
      it to both rows should do no harm either */ 
    display: flex; 
    flex-direction: column; 
} 

.c { 
    order: 1; /* make this one single element “take a step back” */ 
}