Как через push и pull поменять местами 12-колонные блоки бутстрап?

Question

[Макс Жуков]

Как через push и pull поменять местами 12-колонные блоки бутстрап?

Answer 1

[Виктор Таран]

А гуглом пользоваться не судьба ? https://itchief.ru/lessons/bootstrap-3/85-bootstra...
НЕ работает когда кол в коле, только на верхнем уровене!
Что касается 12 колонок то вообще не вижу проблемы ведь на xs работает, а там какраз почти все по 12

Comments

[Макс Жуков]

У меня просто не меняет колонки
Они просто уходят влево и вправо

<div class="reverse_block">
    <div class="row">
        <div class="col-sm-12 col-sm-push-12">
        <section class="get_advice">
            <div class="container">
                <h2 class="text-center">Получите консультацию</h2>
                <div class="row">
                    <div class="col-xs-8 col-xs-offset-2 col-sm-offset-0 col-sm-6"><p>Конечно, далеко не в каждой
                        компании и не на каждом небольшом предприятии есть специалисты по пожарной безопасности, но
                        требования, увы, для всех одинаковы.
                        <br> Поэтому, если вы не уверены в том, что сможете самостоятельно изготовить схему -
                        <a href="#">обращайтесь к нам</a>. <br> Разработка планов эвакуации людей и здания при пожаре
                        будет качественно осуществлена нашими специалистами. План-схема будет изготовлен на выбранном
                        Вами материале в любом формате для всех объектов Минска (РБ).</p></div>
                    <div class="col-xs-8 col-xs-offset-2 col-sm-offset-1 col-sm-3">
                        <form action="#">
                            <div class="title text-center">Оставьте Ваш номер телефона
                                и нашменеджер свяжется с Вами
                                в течение <span>5-ти минут</span>
                            </div>
                            <input type="tel" placeholder="Ваш телефон">
                            <input type="submit" class="calculate_cost_btn" value="Отправить">
                        </form>
                    </div>
                </div>
            </div>
        </section>
        </div>
        <div class="col-sm-12 col-sm-pull-12">
            <section class="attention inverse-darken">
                <div class="container">
                    <div class="row text-center">
                        <div class="col-xs-8 col-xs-offset-2 col-sm-offset-0 col-sm-12">
                            <h2>Внимание!</h2>
                            <p class="special_offer">
                                У нас действует <span class="value">MoneyBack</span> - мы вернем Вам все выплаченные деньги
                                в случае возникновения претензий к нашей работе со стороны государственных органов.

                            </p>
                            <div class="PS">*Подробности уточняйте у менеджера</div>
                            <div class="order_btn"><a href="#">Заказать</a></div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

[Виктор Таран]

Если вежливо то: ЧТО ЭТО ?
Покажите мне пожалуйста в каком примере вы видили что пуши и пулы работают в разных row да и еще и container ?

[Макс Жуков]

Виктор Таран, если вежливо, то row там один.
и если заменить и второй блок то они встанут в две колонки,

Answer 2

[Harrisson]

Ты не понял как работают push pull работает только с колонками, строки он местами менять не умеет.
Они толкают и тянут соответственно вправо и влево на указанное количество секций
Я не знаю как в bootstrap 3 поменять местами блоки но в flexbox их поменять легко

<style type="text/css">
        .conflex{
            display: flex;
            flex-direction: column;
        }
        .item2{
            order: 1;
        }
        .item1{
            order: 2;
        }
 </style>
<div class="conflex">
        <div class="item1">1 блок</div>
        <div class="item2">2 блок</div>
</div>

bootstrap 4 использует flexbox, так что тут всё легче. Используем модификатор order-*
* - это порядковый номер а не количество колонок
Если у нас 2 блока это это будет order-1 и order-2
также работают модификаторы размера экрана (например order-md-1)

В этом примере поменял местами 2 и 1 блок как в колонках (md) так и в строках(xs)

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-9 order-2">
          2 блок
        </div>
        <div class="col-xs-12 col-md-3 order-1">
          1 блок
        </div>
    </div>
</div>

Comments

[Макс Жуков]

Спасибо! Просто col-sm-12 это же тоже колонка, только одна а за ней такая же идет колонка только на весь row, поэтому я думал что колонки можно менять)