2015-12-17 3 views
3

Я читал много вопросов и ответов здесь об обмене, перестановке и замене divs с помощью бутстрапа, но я не мог решить свою проблему.Подкачки divs с bootstrap

У меня есть два divs, которые содержат больше divs в нем.

Один div (A) находится справа, а другой слева (B).

В представлении на рабочем столе и планшете они устанавливаются рядом с другим AB. Когда на мобильном зрении я хочу быть под B.

<div class="container"> 

    <div class="row"> 
    <div class="col-md-6 col-sm-6"> 
     A 
    </div> 
    <div class="col-md-6 col-sm-6"> 
     B 
    </div> 
    </div> 

    </div> 

Я попытался с Нажимным, но это не сработало. Любая помощь будет оценена по достоинству. Благодаря

+0

Я знаю, что вы сказали, что попробовали, но добавление col-sm-push-6 в верхний div и col-sm-pull-6 в нижний div должно работать именно так, как вы этого хотите. – Benneb10

+0

Когда я делаю это так, они меняются, но не в мобильном режиме. Я работаю над своим ноутбуком и на ноутбуке, но они меняются местами, но когда я пересматриваю браузер до минимального взгляда, они не обрезаются. – Isabella

+0

Взгляните на это, попробуйте обратное (дизайн для мобильных устройств) и замените их на рабочем столе http://stackoverflow.com/questions/21933664/bootstrap-3-push-pull-columns-only-on-smaller-screen- размеры – Benneb10

ответ

2

Вот одно решение, которое сделал трюк для меня:

<div class="container"> 
<div class="row"> 
    <div class="col-md-6 col-sm-6 col-lg-6 col-push-6"> 
     Content B 
    </div> 
    <div class="col-md-6 col-sm-6 col-lg-6 col-pull-6"> 
     Content A 
    </div> 
</div> 
</div> 

SEE РАБОЧИЙ ПРИМЕР HERE

Подробнее о Bootstrap заказе here

1

Вы можете использовать трюк видимого класса:

<div class="row"> 
<div class="col-md-6 col-sm-6 visible-lg visible-md"> 
A (Visible-lg & md) 
</div> 
<div class="col-md-6 col-sm-6"> 
B 
</div> 
<div class="col-md-6 col-sm-6 visible-sm visible-xs"> 
A (Visible-sm & xs) 
</div> 
</div> 
+1

Действительно плохой дизайн, особенно если контент не является статичным. –

+0

Я думаю, что это хорошо, когда контент A & B - это всего лишь небольшой текст –

+1

Не повторяйте себя – JDandChips

Смежные вопросы