Bootstrap right column go to upper when small

Question

I want to know is there possible in bootstrap change col right go to upper when small? Default column in upper when small is left column.

I want like this:

--1-- --2-- --3--

when small like this:

--3--

--2--

--1--

this is my original code in bootstrap:

    <div class="row">
        <div class="col-sm-4">
            1
        </div>
        <div class="col-sm-4">
            2
        </div>
        <div class="col-sm-4">
            3
        </div>
    </div>

See this https://stackoverflow.com/questions/37814508/order-columns-through-bootstrap4 — Sorush, Oct 14 '20 at 19:18

score 3 · Answer 1 · answered Nov 10 '15 at 14:29

3

Try this https://jsfiddle.net/2Lzo9vfc/41/

HTML

    <div class="row">
    <div class="col-sm-4 col-sm-push-8">
        3
    </div>
    <div class="col-sm-4">
        2
    </div>
    <div class="col-sm-4 col-sm-pull-8">
        1
    </div>
</div>

answered Nov 10 '15 at 14:29

Nenad Vracar

118,580
15
151
176

Was just about to post the same - this is the best solution IMO – Novocaine Nov 10 '15 at 14:30

score 0 · Answer 2 · edited May 23 '17 at 11:59

0

You could put the third div first use the push and pull in bootstrap to move them around at larger screen sizes.

Here's someone with a similar problem:

Reverse grid arrangment?

And here's the documentation for push and pulling in bootstrap: http://getbootstrap.com/css/#grid-column-ordering

edited May 23 '17 at 11:59

Community

1
1

answered Nov 10 '15 at 14:24

Blake

641
6
12

score 0 · Answer 3 · answered Nov 10 '15 at 14:27

Something like the following should work.

<div class="row">
    <div class="col-md-4 col-sm-12">
        1
    </div>
    <div class="col-md-4 col-sm-12">
        2
    </div>
    <div class="col-md-4 col-sm-12">
        3
    </div>
</div>

You can add multiple "column types" to a class. You can use the following column types:

.col-xs-*, for screens smaller than 768px wide
.col-sm-*, for screens above 768px wide
.col-md-*, for screens above 992px wide
.col-lg-*, for screens above 1200px wide

References:

Bootstrap right column go to upper when small

3 Answers3