Grid Layout set up question

[John]

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!

[David]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts