Question

在Bootstrap上遇到麻烦，我有两个div：（A）在大型设备上为col-lg-6，（B）为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

基本上，这个问题是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 beta开始，类更改为order- *，因此您应在“ A” div上使用order-lg-first order-last。

Answer 2

在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>

订购Bootstrap div

2 个答案: