Возникли проблемы с Bootstrap, где у меня есть два div: (A) как col-lg-6 и (B) как col-lg-6 на большом устройстве.

отобразит: (A) (B)

Я хочу отображать переключение порядка div на мобильном или небольшом устройстве? Col- см - 12

отобразит: (B) (A) * (для отображения друг над другом)

<section class="about-page">
    <div class="container">
        <div class="row mineral_padding">
            <div class="col-lg-6 col-sm-12 order-1 wow fadeInLeft">
                <div class="about_us mineral_margin">
                    <div class="about_slide">
                        <div>
                            <h5>A
                            </h5>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-12 order-12 wow fadeInRight">B</div>
        </div>
    </div>
</section>

Я использую Bootstrap v4.0.0-alpha.6 (сюда не вернемся)

Спасибо, парни

1
giofus 16 Сен 2018 в 21:44

2 ответа

Лучший ответ

По сути, на этот вопрос уже был дан ответ здесь и here .

В Bootstrap 4 alpha.6 классы упорядочивания были flex-*, поэтому это будет:

<section class="about-page">
    <div class="container">
        <div class="row mineral_padding">
            <div class="col-lg-6 col-sm-12 flex-last flex-lg-first wow fadeInLeft">
                <div class="about_us mineral_margin">
                    <div class="about_slide">
                        <div>
                            <h5>A
                            </h5>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-12 wow fadeInRight">B</div>
        </div>
    </div>
</section>

https://www.codeply.com/go/ajPR2ByFVM

Начиная с бета-версии 4.0 классы изменились на order- *, поэтому вместо этого вы должны использовать order-lg-first order-last в div "A".

1
Zim 16 Сен 2018 в 19:43