бутстрап, переустановка разделов под мобильным видом.

Question

Я столкнулся с интересной ситуацией, в которой у меня есть два столбца и два div в каждом столбце. Проблема, с которой я сталкиваюсь, заключается в том, что когда мне нужно масштабировать окно до мобильного вида, мне нужно два divs из второго и третьего столбцов для обмена.

Пример (я использую Haml)

col-sm-8 
%h1 "A" 
%h1 "B" 

col-sm-4 
%h1 "C" 
%h1 "D" 

Так в основном это будет выглядеть следующим образом AA C BB D

Но когда я хочу, чтобы уплотнить его, он выглядит как

A

B

C

D

А вот вещь, когда я хочу это сгущенное, я хочу, чтобы столбцы выглядеть, как:

A

C

B

D

Есть ли у кого-нибудь идеи о том, как идти с этим?

Answer 1

Вы можете выполнить это, подделав его, потянув и нажав определенные столбцы разных размеров. См. http://getbootstrap.com/css/#grid-column-ordering. В принципе, вы будете тянуть или толковать столбцы больших размеров, но для мобильных устройств не нужно толкать или тянуть и иметь столбцы в том порядке, в котором вы хотите, чтобы они отображались.

Таким образом, следует указать html-страницу, такую ​​как A, C, B, D; затем используйте push и pull для sm или md и больше, чтобы упорядочить их, как вам угодно, на больших экранах. Я не знаю, будет ли работать толкание и вытягивание более двух столбцов. Если это не так, вы всегда можете создавать вложенные столбцы, так что A и C будут в своем новом столбце и контейнере, а B и D будут делать то же самое, но в левой части экрана.