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 1Content 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 2Content 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
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Gaurav Arora
Gaurav is an experienced UI developer with experience and capabilities to build compelling UI's for Web and Mobile Applications.