How to change column order in wpbakery page builder on mobile?

Question

WordPress

Need help.
I have 2 columns on my site, they are arranged horizontally on the computer.
In the mobile version, they are arranged vertically, one above the other.
It is necessary to make sure that in the mobile version of the site, the right column is located ABOVE the left one (by default it is below it).
Is it possible to do this using the wpbakery page builder so that you don’t have to get into the code, because I don’t know about it?

Answer 1

As a simple option, perhaps not the best idea, you can do the following:
Duplicate the entire row. Use the first row only for display in the desktop (respectively, hide on mobile), hide the second row in the desktop (respectively, show in mobile). And in the mobile version, change the display order of the columns and the column will be displayed as you want.
In bootstrap, this can be solved in a simple way by adding the desired class.

Answer 2

At random, since the site was not made by me, but there were already working blocks, I found a solution. It is necessary to write "md-reverse" in the row settings, in the "Additional CSS class" column, then everything is displayed correctly on the mobile version

Answer 3

There is an official solution.
You need to set the classes vc_col-sm-push-* and vc_col-sm-pull-* to the columns,
where * is the number of grid columns (*/12).
For example, we put the vc_col-sm-push-6 class in the first column, and the vc_col-sm-pull-6 class in the second column.
This technique swaps columns in the desktop version. Therefore, we do it in the admin panel immediately as we want it to be in the mobile version, add these classes, and they change the columns on the desktop version, on the mobile version they are disabled.