Streaming live at 10am (PST)

How do I responsively re-arrange grid items?


so I have this grid layout that looks like this:

As you can see, there’s text on the left side, image on the right side and in the row below there’s an image on the left side and text on the right side.

When I’m designing for tablet and below, I want the grid to just display the items below each other. But when doing so, the layout becomes like text, image, image, text like this:

Instead I would want it like text, image, text, image. How would I do this?

(Sorry for my english, I hope you understand what I mean :))

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

IMHO you don’t need grid for that, you can use to separate div blocks set as flex and invert the second one to get that what you’re trying to achieve.

1 Like

I put images inside your divs and it appears to work as you want. Try this without the background image of the div.

1 Like

Oh, so you can invert the flex settings in different breakpoints? That makes so much sense. Gotta test it out! Thanks :slight_smile:

1 Like