Bootstrap pulling and pushing columns to change the order of the element


Previous Post Link: Bootstrap grid system, column, row, and many more

At times, you might want to display the columns on the screen in a different order than the way in which they are defined in the HTML code. Bootstrap provides the col-push-X and col-pull-X classes for this. While col-push-X will move the column to the right by X units, col-pull-x will move the column to the left by X units, where X is the number of units by which you want to move the columns. This feature helps you reverse the order of columns.

Take a look at the following code to understand this better:

Now see the output, paragraph 2 is sitting before paragraph 1

bootstrap pull and push