订购 Bootstrap div

Question

在我有两个 div 的 Bootstrap 上遇到问题：(A) as col-lg-6 & (B) as col-lg-6 在大型设备上。

将呈现：(A)(B)

我希望在移动设备或小型设备上显示切换 div 的顺序？ col-sm-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

在 B 上使用order-lg-1 order-sm-0
在 A 上使用 order-lg-0 order-sm-1

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>

Answer 2

基本上，这个问题一直是answered before here和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-*，因此您可以在“A”div 上使用 order-lg-first order-last。