Change Columns order using Bootstrap Push and Pull Classes

Posted By : Gaurav Arora | 10-Jan-2017

Hi,

As we all know that in responsive view once in a hundred times there comes a requirement that we have to show right column above the left one.

 

How can we achieve that ?

 

By using positions and any other float properties in media queries. No, we can simply do that with Bootstrap’s push and pull classes, and we can also use the same classes according to our view like, xs, sm,md, lg.

The push class will move our div to right and pull class to left.

Suppose this is our HTML structure.

Content 1
Content 2

When we run this code in browser the Ui in the mobile view will be like:

Content 1

Content 2

But that’s not our requirement we need content 2 on the top of content 1. For using that push and pull classes we will have to rearrange our HTML structure.

Content 2
Content 1

And when we run this code in browser the Ui in the mobile view will be like:

Content 2

Content 1

In this way we can the change the order of our bootstrap’s columns in responsive view using bootstrap’s push and pull classes.

 

THANKS

About Author

Author Image
Gaurav Arora

Gaurav is an experienced UI developer with experience and capabilities to build compelling UI's for Web and Mobile Applications.

Request for Proposal

Name is required

Comment is required

Sending message..