Hi there!
So basically I have a problem figuring out how to use generateblocks to accomplish a grid layout as shown in the picture.
The block that is an issue for me is the green one.
What’s important is that on mobile version the grid order is respected as shown in the picture.
I guess I could figure it out using CSS but I’m looking more into built-in solution if possible.
Thank you so much in advance!
Hi Eduardsans,
Tried testing this and was able to accomplish such a design through something like this: Edit Page “Generate Blocks ...
Specifically, I have a Grid Block with two columns, and one column has two more Container Blocks inside.
Also see: Screen Recording 2022-03-23...
As shown in the screen recording, the three Container Blocks all have the same top padding (100px).
Here is a video of it working as expected: Screen Recording 2022-03-23...
Hope this helps! 
Hi Fernando, thanks for responding ! but that is not what I’m trying to accomplish.
Your green panel on the mobile grid is in position 3 but on desktop grid is on position 2, and I want it to be on position 3 on desktop. (I’m taking these numbers from my drawing)
But no worries, I don’t need no longer a solution for this.
I see. You’re right. You’ll most like need custom CSS for that but there would be a workaround.
For others who would like a workaround with no code:
Create a layout that has two copies of the Green Panel, just use the hide-on-mobile/desktop classes respectively.
Specifically, on Mobile, it would be 1 3 2 3 - add hide-on-mobile for the first “3”.
Moreover, on Desktop/Tablet - add hide-on-desktop and hide-on-tablet for the second “3”.
I think I’ve got it. Screenshots should show settings. The key issue is to use negative top margin on block 3 in desktop mode, or it will be positioned below box 2. I this forum lets me post a link, you can see it here: 3 block challenge - Let's Test Wordpress!
Thank you for sharing Will!
Change the z-index for mobile.
