Archived topic
Grid Layout set up question
1 reply · Started by John on August 27, 2020
On the homepage of the site I'm building I will have 8 sections. One of those sections will be on desktop in a 2 x 4 grid in order to alternate text and image. On desktop would be col 1 row 1 text, col 2 row 1 image and then col 1 row 2 image, col 2 row 2 would be text, etc. So that display works on desktop but then on mobile I want Image/Text/Image/Text.
How I built the page is with containers and columns which doesn't give me the order capability in the Block Settings (from what I can see).
So I need to use Grid Blocks. That then leads me to a couple of questions - should I use the Grid only for the section that I need to adjust the mobile format? Or is it better to build the whole page from a Grid Block?
And then when using Grid Blocks in this instance - I need to add 4 2-col Grid Blocks, right?
I'm learning!
Hi there,
you can do this with the Grid Block.
Unless you're doing something really funky - then only use a Grid Block where it is needed.
To re-order the items on mobile, select each Grid item ( column ), in the Settings sidebar select Mobile. And under Layout you will see an Order Field.
Set the Mobile Order for each grid item, by adding a numeric value, 1 is on top, 2, 3,5
If use CSS Flexbox Order property if you want to read up more on that :)
