CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
Elaine Byene
Elaine Byene

Reputation: 4142

Reorder columns in mobile for Bootstrap 4

I am using Bootstrap 4 and got into a unique situation where I have to re-order from the following format in desktop version:

[        ] [column 2]
[column-1] [column 3]
[        ]

to mobile version:

[column 2]
[column 1]
[column 3]

Here's the HTML:

<div class="container">
    <div class="row">
        <div class="col-sm-7">
            [column 1]
        </div>
        <div class="col-sm-5">
            <div class="row">
                <div class="col-sm-12">
                    [column 2]
                </div>
                <div class="col-sm-12 order-last">
                    [column 3]
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 46

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362440

In order to reposition the columns they must be in the same parent .row. Use the Bootstrap float classes and d-sm-block to disable the flexbox on larger screens. Then order-first will position the divs as desired on mobile...

<div class="container">
    <div class="row d-sm-block align-items-center">
        <div class="col-sm-7 float-left">
            [column 1]
        </div>
        <div class="col-sm-5 float-left order-first">
            [column 2]
        </div>
        <div class="col-sm-5 float-right">
            [column 3]
        </div>
    </div>
</div>

https://www.codeply.com/go/8bmIH3XGnL

Related:

On smaller displays show one part of the sidebar above and a second part below the main content
One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
Bootstrap with different order on mobile version

Upvotes: 1

Related Questions