Row/Column Layout on Mobile is broken

[iDigitalise]

Hi Guys -

Need some help with Rows/Columns and the way it’s all appearing on the mobile.

So I have 4 rows of 2 columns each and the columns have alternating text and image boxes.

When viewing the page on mobile. I would want to see the order of the boxes to remain the same with either Image followed by content or Content followed by the image.

However at the moment its showing Image, content, content, image, image, content and so on.

I am not sure if the setup is incorrect or this requires additional CSS.

I have provided you access and the links to the site in the secure note.

Thanks

[friech]

Hi @iDigitalise,

Thank you for writing in, in that case, you need to duplicate the ROW of your first and third section.

Then on the duplicate ROW, interchange the content of the left and right column.

After that utilize the Hide During Breakpoint option, to hide the original ROW on mobile, and hide the duplicate ROW on desktop so both ROWs won’t show up in the same time.

Hope it helps,
Cheers!

[iDigitalise]

Hi Friech -

Thanks for that; but is that not going to increase my page load times, since I am adding the images twice?

And with this option it also means that everytime my client has to make a change to the image or content they have to remember do this twice?

Thx

[friech]

Hi @iDigitalise,

There is another way, to utilize the CSS Flexbox to re-order the columns on mobiles, but it’s more complicated than the Hide During Breakpoint solution unless you’re familiar with the CSS flexbox.

A Complete Guide to Flexbox

Follow this thread for reference.

Cheers!