Bootstrap 4 flex system поддерживает определенные элементы собственной строки в родительском столбце?

Question

У меня есть следующие navbar:

<div class="d-flex flex-column flex-lg-row">
   ......
</div>

Например:

.bd-highlight {
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.15);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column flex-lg-row justify-content-between bd-highlight">
  <div class="p-2 bd-highlight order-0">Flex item 1 (LOGO)</div>
  <div class="p-2 bd-highlight order-2 order-lg-1">Flex item 2 (Nav. Menu)</div>
  <div class="p-2 bd-highlight order-1 order-lg-2">Flex item 3 (Search Form)</div>
  <div class="p-2 bd-highlight order-3">Flex item 4 (Acc. Menu)</div>
</div>

Но мой дизайн включает в себя следующие особые случаи.

1 - Носитель (≥ 992px): все рядом.

2 - Носитель (<992px): </strong> все снизу. Но Flex item 2 и Flex item 3 они движутся. Для этого я использую класс order-*. -Смотри выше фрагмент и следующее изображение .- После этого, я хочу, чтобы я сам рядок рядом (1 and 3) (2 and 4)

Все хорошо. Я не могу найти, как я могу встать рядом Flex item 1 - Flex item 3 и Flex item 2 - Flex item 4.

(через себя, потому что у родителя есть столбец, и я не могу добавить больше родителей, потому что они двигаются.)

КАК ЭТО:

Bootstrap 4 или flexbox поддерживает это действие? Возможна ли такая мысль или я должен искать решения другими способами?

Например:

<div class="flex-column">
    <div class="flex-self-row1"></div>
    <div class="flex-self-row1"></div>
    <div class="flex-self-row2"></div>
    <div class="flex-self-row2"></div>
</div>

Answer 1

Если вы хотите, чтобы ваш родительский элемент был flex-column, нет никакого способа добиться того, что вы хотите для мультимедийного устройства <992px, если вы не сгруппируете Flex-элементы 1 и 3 в качестве строки и Flex-элементы 2 и 4 в качестве другой строки,или вы готовы дублировать эти элементы и показывать / скрывать их на основе медиазапросов. </p>

Другой подход заключается в отображении родительского элемента в виде flex-row и его выборе wrap, а затем в настройке этих элементов flex'width to 50%!

Чтобы сохранить ваш HTML аккуратным, я собирался использовать утилиту width из Bootstrap для установки ширины, но, к сожалению, классы утилит width не имеют адаптивных вариаций.Поэтому я изменяю макет HTML, добавляю 2 пользовательских класса .parent и .item и стилизую их с помощью пользовательских стилей.

HTML

<div class="d-flex bd-highlight parent">
    <div class="p-2 bd-highlight order-0 item">
        Flex item 1 (LOGO)
    </div>
    <div class="p-2 bd-highlight order-2 order-lg-1 item">
        Flex item 2 (Nav. Menu)
    </div>
    <div class="p-2 bd-highlight order-1 order-lg-2 item">
        Flex item 3 (Search Form)
    </div>
    <div class="p-2 bd-highlight order-3 item">
        Flex item 4 (Acc. Menu)
    </div>
</div>

Медиа-устройство <992px </h3> .parent { flex-flow: row wrap; } .parent .item { width: 50%; } Мультимедийное устройство> = 992px

@media (min-width: 992px) {
    .parent {
        justify-content: space-between;
    }

    .parent .item {
        width: auto;
    }
}

скрипка: http://jsfiddle.net/aq9Laaew/273412/