bootstrap pull and push column

Question

I have read many topics here on stackoverflow regarding this question. I have read and used the solutions provided here, however! for some reason this stuff just doesn't work with me. I get a completely blank page.

The idea is to get primary button above the default button on extra small devices. For some reason i am completely blank even on md and sm devices.

Would appreciate help. Thank you

<body>
    <div class="row">
        <div class="col-md-6 col-xs-12 col-xs-push-12">
            <button class="btn btn-default" type="button">Button</button>
        </div>
        <div class="col-md-6 col-xs-12 col-xs-pull-12">
            <button class="btn btn-primary" type="button">Button</button>
        </div>
    </div>
</body>

Possible duplicate of [Swap the positions of grids which are side by side to top and bottom using bootstrap](http://stackoverflow.com/questions/41096317/swap-the-positions-of-grids-which-are-side-by-side-to-top-and-bottom-using-boots) — Banzay, Jan 06 '17 at 20:55

Carol Skelly · Answer 1 · 2022-01-08T17:49:58.370

2

You just need to think "mobile-first". Create the markup for the smallest device layout first, and then adjust it using push/pull for larger screens. The col-xs-12 is not necessary since the columns stack automatically on xs widths.

<div class="row">
    <div class="col-md-6 col-md-push-6">
        <button class="btn btn-primary" type="button">Button</button>
    </div>
    <div class="col-md-6 col-md-pull-6">
        <button class="btn btn-default" type="button">Button</button>
    </div>
</div>

Demo: http://codeply.com/go/aUME1OcT0S

Update: As of Bootstrap 4, it's possible to re-order 12 unit columns: bootstrap pulling/pushing 12 columns not working properly

edited Jan 08 '22 at 17:49

answered Jan 06 '17 at 21:04

Carol Skelly

351,302
90
710
624

Which Bootstrap version was this? In Bootstrap 4 nothing named like "`col-md-push-6`" can be found. – Top-Master Jan 08 '22 at 15:17
@Top-Master 5 years ago was Bootstrap 3, early Bootstrap 4. OFC Bootstrap 3 does have `col-md-push-6` – Carol Skelly Jan 08 '22 at 17:48

score 1 · Accepted Answer · answered Jan 06 '17 at 20:22

Unfortunately you cannot use the push/pull method on col-*-12 because of the way push/pull works. So a solution that works very well is to have the order correct for mobile and then use the push/pull method on larger screen sizes like this:

<div class="row">
    <div class="col-xs-12 col-md-6 col-md-push-6">
        <button class="btn btn-primary" type="button">Button</button>
    </div>
    <div class="col-xs-12 col-md-6 col-md-pull-6">
        <button class="btn btn-default" type="button">Button</button>
    </div>
</div>

And here is a working codepen: http://codepen.io/egerrard/pen/NdqpXZ?

FYI, you are also only using md and xs column notations but you mention you only want this functionality for xs screen sizes. If that is the case you need to change your md columns to sm.

bootstrap pull and push column

2 Answers2