Correct row order in Visual Composer on mobile

[Feldspar]

Hi,

I’m building an employee listing and have each row alternating image on onside, text on the left for desktop.
http://www.dangerpress.com/crew/

When viewed in mobile, the rows that have text on the left get put above the image on the right. I need the image always above the text.

Is there a way I can specify that in mobile, the image should be above the text in Visual Composer?

I’ve tried adding swapcolumns class to the columns I want to change and added the css:

@media (max-width: 767px) {
.x-section.swapcolumns .x-container {
display: flex;
flex-flow: column-reverse wrap;
}

Thanks,

J

[nabeel]

Hi there,

Thanks for writing in! You actually need two sets of content: one for mobile and one for desktop. You’ve already created the desktop version which you can hide for smaller screens and create sections for mobile version and show them in mobile devices. We’re doing the same in our demo see http://demo.theme.co/integrity-1/

Hope this will help you in getting started.

Cheers!

[Feldspar]

Thanks Nabeel.

I’ve duplicated the sections and set them to hide on phones with the classes x-hide-md x-hide-xl x-hide-lg and on desktops/tablets with x-hide-sm x-hide-xs.

I’m using a text element to mark the beginning and end of each section to make editing easier but I’m unable to disable the rows holding the elements.

I have the row holding the text title (PHONE) disabled so it isn’t visible on the live site
https://postimg.cc/image/nuc6qesvl
https://postimg.cc/image/t5r3b478h

but it’s still showing on the live site.
https://postimg.cc/image/emjy9p6dt

Is there another way to disable a row or is there label sections?

I’m unable to tun off X Integration as a solution because I’m using the above classes to hide sections.

X Theme 2.1.6
WPBakery Page Builder 5.5.2
WordPress 4.9.7

J

[lely]

Hi J,

Unfortunately, DISABLE ROW option has conflict with X integration. It will only work as intended if we disable X integration in Visual Composer settings.

Note that even if you disable X integration, those classes will still work as intended. X integration on each elements is what will be unavailable when this settings was disabled. You can see that when you edit Text element for example you will have vanilla visual composer options. Expect difference on how elements are rendered when this integration is disabled.

Hope this helps.