This is a short tutorial, but very powerful in the right scenarios.

What Is Column Ordering?

Column ordering allow us to change the order of our grid system based on different browser sizes. This means that on a large screen, you can have a different grid than on a mobile screen. The columns are displayed in the same order as they go in the code. I.e. the left column goes to the top, and the right column goes under the left column. But that's not always what we want.



For example, in this scenario we want to reorder columns on mobile devices only, and place pictures before the text. Such functionality has been implemented in Bootstrap and we will use Bootstrap classes as a foundation (here's an article with technical details, if interested).

Step 1. Arrange columns in desired order on mobile first.

During editing in Page Builder, reverse the order of columns if needed. At this stage we don't care how it looks on desktop.

Step 2. Add suplementary classes for desktop.

Then, after you finish with mobile, the next step is to reorder on desktop. The A column should swap places with B.

The push and pull classes applied to the grid are .vc_col-sm-push-# or .vc_col-sm-pull-#. The push class will move columns to the right while the pull class will move columns to the left. The Bootstrap grid divided into 12 columns, thus:

To move column 50% to the left, we need to use .vc_col-sm-pull-6 class.
To move column 50% to the right, we need to use .vc_col-sm-push-6 class.

 

The extra class needs to be pasted in column settings >"Extra class name", like so:

After adding the extra classes, our work is done.

Final Result