Archived topic

Change order of image and text on mobile

3 replies · Started by CRAIG on July 27, 2021

Viewing posts 1–4 of 4

July 27, 2021 at 5:06 pm #1873629

On my site homepage (link added privately) below the hero section, you will see 4 containers, each with a grid inside

They display fine on desktop, but on mobile, I want the image to display first, followed by the H2 title, then the paragraph text, then the link

Could you suggest the best way to achieve this?

Thanks

July 27, 2021 at 6:23 pm #1873662

Hi Craig,

You can add this CSS:

@media(max-width: 768px){ 
.reverse-on-mobile { flex-direction: column-reverse; } 
}

And then add reverse-on-mobile on the additional CSS classes of the Grid Block you want to reverse the order of columns on mobile. :D

July 28, 2021 at 5:35 am #1874287

Thanks Elvin, this worked

July 28, 2021 at 6:05 am #1874341

Hi there,

just for reference, the GenerateBlocks Grid Block has an Order value - see here:

https://docs.generateblocks.com/article/container-overview/#layout-–-grid-item

When switching to a responsive view in the editor eg. Mobile, you can select a Grid column container and set its Order.
A simple fix to switch a 2 column grids order on mobile is to set the second column to order (minus) -1 this will move it before the first container.

This archived topic is closed to new replies.

Start building better websites today.