Порядок загрузки DivS

Question

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

будет отображать: (A) (B)

Я с нетерпением жду отображения переключения порядка деления на мобильном или небольшом устройстве? кол-см-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 (не вернусь сюда)

Спасибо, ребята

Answer 1

В основном, на этот вопрос ответили здесь и здесь .

В 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"A "div.

Answer 2

Используйте order-lg-1 order-sm-0 на B
Используйте order-lg-0 order-sm-1 на A

https://getbootstrap.com/docs/4.0/utilities/flex/#order

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<section class="about-page">
    <div class="container">
        <div class="row mineral_padding">
            <div class="col-lg-6 col-sm-12 order-lg-0 order-sm-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-lg-1 order-sm-0 wow fadeInRight">B</div>
        </div>
    </div>
</section>