Grid order from desktop to mobile

Support
#1

how can I get my display order to reverse for mobile
from this

to this

not have two texts in a row.

#2

Hi,

You need to create two rows with the same content but in reverse order. Then make 1 visible in desktop only and the other to be visible in mobile only.

Row 1 - desktop only

text on the left - image on the right

Row 2 - mobile only

Image on the left - text on the right

Hope this helps

#3

This is not working for me. I cant get you system to work consistently. everything fails to work correctly. I have lost all faith that your system has any consistency whatsoever

#4

Ok I think I have got it now

#5

My editing program is not updating in real time. i have to refresh the page to see changes. What could be causing that?

#6

This is what it is showing even after refreshing the page.
https://monosnap.com/file/PWZnnjOCtakfc6Ii0KDeBcy4lHJWlR

#7

Hey @VelocityWeb,

The builder’s output is consistent provided that you don’t have broken custom code in the page. Please give us the URL of the page your working on so we could check your setup.

Thanks.

#8

https://www.velocitywebsites.co.nz/grid-2/

#9

Hello There,

Has this been resolved already?

On another alternative, The text, image layout is possible on smaller screen. Simply do this approach by having your column layout the same as the first row. The only difference is that on the left column in your second row, you need to add a custom right class and also an inline css margin-right: 0;. Please the screenshot below:

This setup will make sure that on large screens, you will have image text and text image layout but on smaller screen, you will just have text image and text image.

If you can give us access to the site, I would be happy to give you an example page for your reference.

Regards.

#10

Great - I like that a lot better. :grin:

#11

Glad we could help,

My editing program is not updating in real time. I have to refresh the page to see changes. What could be causing that?

More likely that is a caching feature related, remember to clear all your caching features (plugin, server-side, CDN, and browser’s cache) after editing/updating so that the code from the latest release is always in use. This will help you to avoid any potential errors/discrepancies.

Cheers!

#12

Just one issue with this method. When I put the row into marginless columns mode, it switches back to the other side. Is there a way to stop this?

#13

Hi,

By setting your row to marginless column mode, it sets all your columns to float=none which prevents the right class from working.

You have two options only.

  1. Use visibility feature to make alternate image -text
  2. Add right class and not use marginless columns.

Again If you can give us access to the site, I would be happy to give you an example page for your reference.

Thanks

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.