How do I responsively re-arrange grid items?

Design help General
1

Hey,

so I have this grid layout that looks like this:

grid-problem
grid-problem1546×832 193 KB

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:

grid-problem-2
grid-problem-2696×827 96.2 KB

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)

2

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
3

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

image
image372×654 27.8 KB

1 Like
4

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