- This topic has 3 replies, 3 voices, and was last updated 4 years, 10 months ago by
.
-
Posts
-
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
Customer Support
Hi Craig,
You can add this CSS:
@media(max-width: 768px){ .reverse-on-mobile { flex-direction: column-reverse; } }And then add
reverse-on-mobileon the additional CSS classes of the Grid Block you want to reverse the order of columns on mobile. 😀Thanks Elvin, this worked
Customer Support
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)-1this will move it before the first container.
- You must be logged in to reply to this topic.
