Reorder columns in mobile for Bootstrap 4

Question

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>

score 1 · Answer 1 · answered Sep 23 '19 at 23:24

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

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

Reorder columns in mobile for Bootstrap 4

1 Answers1