«Вытянуть центр» в Bootstrap: столбцы A -D-B -E-C, рушившиеся до A-B-C // D-E, как получить B между D и E?

Question

Я не с просьбой о простом выравнивании по центру столбцов в бутстрапе. Это легко и has been covered already, эти решения не относятся к тому, что я пытаюсь сделать здесь.

---

То, что я хочу, это макет, который пять колонка на широких устройств, 2 - 3 - 2 - 3 - 2, рушится вниз, чтобы иметь три 2 колонки 4 - 4 - 4, затем два 3 колонки 6 - 6.

что-то вроде этого:

<div class="row"> 
    <div class="col-xs-4 col-md-2 pull-left"> 
    A 
    </div> 

    <div class="col-xs-4 col-md-2 pull-center"> 
    <!-- of course, pull-center doesn't exist, it's here to illustrate intention --> 
    B 
    </div> 

    <div class="col-xs-4 col-md-2 pull-right"> 
    C 
    </div> 

    <div class="col-xs-6 col-md-3"> 
    D 
    </div> 

    <div class="col-xs-6 col-md-3"> 
    E 
    </div> 
    </div> 

что, если pull-center существовала и float: middle существовало, будет выглядеть следующим образом на широком устройстве:

A- _D_ B- _E_ C- 

... и как это на узком устройстве:

-A-- -B-- -C-- 
__D___ __E___ 

... но, потому что нет такого понятия, как pull-center или float: middle;, в настоящее время выглядит следующим образом:

A- B- _D_ _E_ C- 

Как могу ли я получить столбец B, чтобы плавать между двумя столбцами под ним в HTML? Я попытался добавить различные классы pull- и float CSS в столбцы D и E, но не могу найти ничего, что поможет.

Answer 1

Я думаю, что здесь вы хотите:

<div class="row"> 
    <div class="col-xs-4 col-md-2"> 
    A 
    </div> 
    <div class="col-xs-4 col-md-2 col-md-push-3"> 
    B 
    </div> 
    <div class="col-xs-4 col-md-2 col-md-push-6"> 
    C 
    </div> 
    <div class="col-xs-6 col-md-3 col-md-pull-4"> 
    D 
    </div> 
    <div class="col-xs-6 col-md-3 col-md-pull-2"> 
    E 
    </div> 
</div> 

Пользуется Bootstrap column ordering.

Он может легко изменить порядок реагирующих столбцов.

Надеюсь, это поможет.

Для объяснения:

(Original заказ)

(Новый заказ)

толкающего * (перемещение вправо * шаги)

pull- * (переместить левые * шаги)

В => из (3) до (6) => толчка 3 шагов

С => из (5) (11) => толчка 6 шагов

D = > из (7) (3) => тянуть 4 шаги

Е => из (10) до (8) => тянуть 2 шаги

Answer 2

Вместо того, чтобы использовать поплавок, вы можете использовать .col-*-push-* и .col-*-pull-* Классы модификатора Bootstrap для изменения положения элементов.

Вы будете в конечном итоге с чем-то вроде следующего:

<div class="row"> 
    <div class="col-xs-4 col-md-2"> 
    A 
    </div> 

    <div class="col-xs-4 col-md-2 col-md-push-3"> 
    B 
    </div> 

    <div class="col-xs-4 col-md-2 col-md-push-6"> 
    C 
    </div> 

    <div class="col-xs-6 col-md-3 col-md-pull-4"> 
    D 
    </div> 

    <div class="col-xs-6 col-md-3 col-md-pull-2"> 
    E 
    </div> 
    </div> 

См example.