[Resolved] Change order of image and text on mobile

[CRAIG]

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

[Elvin]

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. 😀

[CRAIG]

Thanks Elvin, this worked

[David]

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.

[Author]

Posts