Become a Partner
Based in Elizabeth, NJ
For Client Services

How to Alternate Columns on Mobile Phones (Visual Composer)

The ability to make all the websites you create responsive on both mobile and desktop devices is why I use Visual Composer (formally WP Bakery) for lots of my builds. Not all but most. However there might be times where you’ll run into an issue with your desktop version of the site and mobile version. Here’s an easy explanation on how to fix that in Visual Composer.

For example: when it comes to lots of my business website builds you’d one row with a large image and some text. Each taking 50% of the row. The row below that would be text and an image. Then the third row would do the same and alternate: image and text. However, when that converts responsively you’d then see stacked: image, text, text, image, image text. This would throw off your ‘alternating column’ layout. This is the solution:

First, switch around the columns from the editor the way you’d want it to look on a mobile device. So every row would be in the same order.

I know you’re wondering why that is, it might seem counter-intuitive. This is the way to trick visual composer into appearing the proper way on mobile and then switch it on a desktop version, giving the look of the alternating columns the right way.

Now add ‘vc_col-sm-pull-6’ in the extra classes field of the right column which would pull the image to the right.

Then add ‘vc_col-sm-push-6’ which would push the left column to the right on a desktop.

The 6 number is used to determine the size of your column so 6/12 is 50%. You would have to determine how large that column is you’re moving. Now view your website on mobile you’ll see each column is stacked on each other properly and your desktop version should appear the way you originally wanted.

I hope this helps! It took me quite a while to find any resources or clear answers on this when I needed it.

Be sure to drop a line in the message box if you found this helpful.


Author avatar
Sam Bel