How to Reverse Column Order in Visual Composer or WPBakery

Last Updated on

Reverse Column Order in Visual Composer or WPBakery

If you are using Visual Composer or WPBakery page builder and wondering to create a two columns section like 1st column is the image and 2nd column is text then 1st column is text and 2nd column is the image as seen in the screenshot
Reverse Column Order in Visual Composer or WPBakery 1

Visual Composer Website Builder

Apparently, you can do this layout by adding first a row, make it 2 columns, add an image to the 1st column and add text to the 2nd column. Then again add the second row make it 2 columns, add text to the 1st column and add an image to the 2nd column. as seen on the screenshot
Reverse Column Order in Visual Composer or WPBakery 2

This will create the same layout as you see in the first screenshot above. But, if you see in mobile the layout will be fist image then text in the first section and first text then image in the second section as you can see in the mobile layout screenshot below
Reverse Column Order in Visual Composer or WPBakery 3

Now, for mobile device, if you want to display the image on top and text on the bottom to each section, or text on top and image on the bottom to each section you to use 2 classes vc_col-sm-push-6 and vc_col-sm-pull-6 to Reverse Column Order in Visual Composer

How to Reverse Column Order or Swap Columns Order in Visual Composer

First, add a row of two columns then add the image to the first column and text to the second column (if you want to display image top and text bottom in mobile), add another row and do the same. As seen on the screenshot
Reverse Column Order in Visual Composer or WPBakery 4

In the above screenshot, you can see the image in the first column and text in the second column in each row. (if you want to display text top and image bottom in mobile then add text to the first column and the image to the second column.)

Now, Edit the second row and add class vc_col-sm-push-6 to the first column then edit the second column and add the class vc_col-sm-pull-6 to the second column of the second row, as seen on the screenshot
Reverse Column Order in Visual Composer or WPBakery 5
Reverse Column Order in Visual Composer or WPBakery 6
Reverse Column Order in Visual Composer or WPBakery 7

This will Reverse the Column and move the left column to move right. Do the same to 4th row, 6th row, all the even rows. Then, It will be displayed like Row 1 = Image + Text, Row 2 = Text + image, Row 3 same as Row 1, Row 4 Same as Row 2.

You can see the Desktop layout in the screenshot below
Reverse Column Order in Visual Composer or WPBakery 8

For Mobile devices, All Rows will be the same First Image then text.

Layout in mobile as this screenshot
Reverse Column Order in Visual Composer or WPBakery 9

This method works for both Visual Composer and WPBakery to Reverse Column Order for Desktop version and the same order for Mobile.

Hope you find this article helpful if you have any question please ask in the comment. If you like this post, share it with your friends and colleague.

Wasim

Wasim Sama is a passionate blogger and experienced web developer.

Leave a Reply

Your email address will not be published. Required fields are marked *

More in Web Design, Wordpress
Woocommerce
What is WooCommerce? Pros and Cons, Extensions and Comparison with others

What is Woocommerce? If you want to create an online store with Wordpress then you definitely need a Wordpress eCommerce

Close