Ordering Bootstrap divs

Question

Having trouble with Bootstrap where I have two divs: (A) as col-lg-6 & (B) as col-lg-6 on a large device.

will render: (A)(B)

I am looking to display switch the order of the divs on a mobile or small device? col-sm-12

will render: (B) (A) *(to display on top of each other)

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

I am using Bootstrap v4.0.0-alpha.6 (no going back here)

Thanks guys

score 1 · Accepted Answer · answered Sep 16 '18 at 19:43

Basically, this question has been answered before here and here.

In Bootstrap 4 alpha.6 the ordering classes were flex-*, so it would be:

<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

As of 4.0 beta, the classes changed to order-* so instead you'd use order-lg-first order-last on the "A" div.

Thank you this worked.. Sorry for a duplicate question I didnt find what I was looking for before I posted my q. — giofus, Sep 16 '18 at 23:36

score 0 · Answer 2 · answered Sep 16 '18 at 19:04

Use order-lg-1 order-sm-0 on B
Use order-lg-0 order-sm-1 on 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>

Ordering Bootstrap divs

2 Answers2