Бутстрап v4 столбцы не будут плавать с включенным flex

Question

Использование Bootstrap v4 директива css float не будет работать с столбцами, еслизадан в переменных SCSS Bootstrap. Это связано с тем, как работает flex.

Как можно добиться такого же эффекта с помощью flex?

Answer 1

направление ряда Reverse контейнера

Один из вариантов плавать все внутри row вправо. Мы можем добавить это к охватывающему элементу (например, row) для достижения этой цели:

flex-direction:row-reverse; 
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */ 

EDIT: Законченное делает подмешать и класс для этого в Bootstrap-й путь, если кто-либо заинтересован (использование .row-reverse как row):

@mixin make-row-reverse($gutter: $grid-gutter-width) { 
    @if $enable-flex { 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: row-reverse; 
    } @else { 
    @include clearfix(); 
    > * { 
     float: right; 
    } 
    } 
    margin-left: ($gutter/-2); 
    margin-right: ($gutter/-2); 
} 

// Row reverse 
// 
// A row with a reversed render direction. 

@if $enable-grid-classes { 
    .row-reverse { 
    @include make-row-reverse(); 
    } 
} 

Заказать отдельные элементы

Другим вариантом было бы указать тыс e заказать столбцы должны находиться внутри контейнера, используя директиву order. Установите на одном из столбцов, содержащихся, чтобы сделать его второй столбец в строке:

order: 2; 

автонастройки

Я помещаю это здесь только потому, что я думаю, что это так, как он должен , но это не работает для меня, как предполагалось. Существует также директива align-self для flex, где переход flex-end к ней приведет к отображению элемента на противоположной стороне столбца flex или flex row. Будьте здоровы, если у кого-то больше информации об этом, но это не сработало для моего случая использования. Возможно, это может помочь кому-то еще.