时间戳

首页 > 解决方案 > 订购 Bootstrap div

html - 订购 Bootstrap div

问题描述

在我有两个 div 的 Bootstrap 中遇到问题：（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 （不要回到这里）

多谢你们

标签： htmlbootstrap-4

解决方案

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

推荐阅读