Pushing and Pulling Columns - Bootstrap 4

user_8196358 0
Viewed 30864

This is what I need:

Desktop: B A

Mobile: 

A
B

Here is my HTML:

<div class="row">

    <div class="col-md-7 col-sm-7 push-md-5">
        A
    </div>

    <div class="col-md-5 col-sm-5 pull-md-7">
        B
    </div>

</div>

It is in correct order on mobile device but not on Desktop. I have tried a couple of guides and help material but without luck. In most guides they are moving equal columns like 4 or 6 so it's a bit confusing to understand it clearly.

grid-layout bootstrap-4 twitter-bootstrap
6 Answers

The accepted answer here misrepresents what the order classes do, which is to merely control the order of flexible items within a flex container (via the CSS order property). They are not a total replacement for all uses of the push-* and pull-* classes but work great for re-ordering columns.

To accomplish what you're looking for BS4 classes, you would need to do:

<div class="col-sm-7 col-md-7 order-md-2">
    A, shows first on mobile, second on desktop
</div>
<div class="col-sm-5 col-md-5 order-md-1">
    B, shows second on mobile, first on desktop
</div>

As per the migration docs for BootStrap 4. See also the CSS order property.

user_11069640
Related