[Resolved] Block/Container order in Tablet + Mobile View

[Matthias]

Hi,

i am trying to sort a grid in mobile view.
In Desktop it is:

Headline Image1 Image2
Text 1 Image1 Image2
Text 2 Image1 Image2

(Images are the height of Headline + Text combined – not dublicates)

In Table i would liek
Headline Image 1
Text 1 Image 1
Space Image 2
Text 2 Image 2

(again Images should span 2 the height of Headline/Space+Text combined)

In mobile i would like
Headline
Text 1
Image 1
Text 2
Image 2

As i wanted headline + text to be the same size in Desktop i can’t (seemingly) simple sort those – at least i didnt get it to work.
When i put the headline over the image its easy – but as i currently have it (headline next to images) i couldnt get it to work.

Hope my question is somehow understandable.

[Ying]

Hi there,

I don’t think there’s a very easy way.

You can build something like this (the containers are containers under the Grid Block):
https://www.screencast.com/t/r3zpP56VTmDX

1. Give Text 2 in Container 1 two additional CSS class: hide-on-tablet hide-on-mobile.
2. Give Container 3 an additional CSS class: hide-on-desktop.

[Matthias]

Well – that way doesn’t seem hard to me – cause it does exactly what i want. It’s a bit confusing to have an extra block in the editor that doesn’t show – ok. But other then that: your solution works great.

Btw – with those css classes i found a doc: Responsive Display

This seem to be related – just in case someone else is looking for info.

Thx a lot. Solved.

[Ying]

Thanks for attaching the documentation 🙂

Glad it works!

[Author]

Posts