Change order (photo and image) on mobile.

Hi Brian,

Can you specify which part of the site do you want this applied on? Sharing a screenshot of the section with indicator would help a lot.

I'll inspect the site to check if perhaps it can actually be done with just CSS. :)

If it's the image and description within the GB Grid Block, you can change the order of things on mobile as shown here -
https://share.getcloudapp.com/OAu6LdOj

You basically have to select the Container block within the Grid block and click on it's "Mobile" tab.

You should see an "Order" text field. This allows you to set what displays first.

Hi Elvin,

Thanks for you quick answer.
Here is a screenshot of the desktop view: https://share.getcloudapp.com/mXuYmLzW
The section is on the home page.
I only want to have the title on first position (and then the image). With the mobile order option, the order will also affect the headline and the rest of the container, which I don't want.
I looked for a CSS solution, tried a few things but nothing worked so far.

Thanks again for you help!

Hi there,

you can't move blocks between grid columns - instead you need to:

1. Above the Image Block add a duplicate of the H2 Headline.
2. Now with your.2 x Headline blocks, select each one and in Advanced > Additional CSS Classes you can add the relevant GP hide-on-* classes see here:

https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

For example the new duplicate headline you could add:

hide-on-desktop hide-on-tablet

and on your original Headline add:

hide-on-mobile

Hi David!

Thanks for you super quick answer! This is exactly what I was looking for, these built-in classes works very well.

Have a good day!

Glad to be of help