Change Columns order using Bootstrap Push and Pull Classes
Posted By : Gaurav Arora | 10-Jan-2017
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:
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:
In this way we can the change the order of our bootstrap’s columns in responsive view using bootstrap’s push and pull classes.
More From Oodles
Ready to innovate? Let's get in touch
Gaurav is an experienced UI developer with experience and capabilities to build compelling UI's for Web and Mobile Applications.