Reordering Grid contents for mobile

Community resources Webflow Tips
1

I’m wondering how I can reorder the contents of a grid for mobile.

On desktop, tablet, mobile landscape the grid is as follows (2 columns, 3 rows):
Image 1
Image 1 div block
Image 2 div block
Image 2
Image 3
Image 3 div block

On mobile portrait, I want the grid contents to work as follows (1 column instead of 2):
Image 1
Image 1 div block
Image 2
Image 2 div block
Image 3
Image 3 div block

Essentially I just want the image to be above the div block on mobile. Thanks!!!

2

hi @nmclain you can achieve this with help of grid-area you can learn more how to use CSS GRID for example here

or here

3

Thanks @Stan for the info. Mostly looking for how to do this within webflow though

4

Hi @nmclain Webflow is nothing else than GUI (Graphic User Interface) that allow you using mouse click for creating HTML and CSS instead writing code. This mean that if you want to use WF you should know at least HTML and CSS basics. But if you think that learn basics will take long time you can use Webflow University where you will learn how to use this platform. Here is part about grid-area

5

Webflow allows you to do literally anything to your website. While most common things only require you to click on some buttons, other things require you to type HTML/CSS code into the Page Settings area.

I believe this is one of those cases that requires you to write code, as there are no buttons specific to what you are trying to achieve.

6

hi @nmclain and @alankemsley I had to jump back to this request as at first is not marked as solved and at second I would like to clear one thing that there is no need to write custom code if content is not pulled from CMS. Here is short video where I show how things can be done.

https://cln.sh/ulqTru

I have forget to add third option as I have promised to get back when I talk about CSS Grid. What I had in my mind that you can combine CSS Grid and Flex. In Grid you can introduce extra div element and place part-2 and part-3 inside this div element. After set this div wrapper as flex to be able swap positions. Of course you have to adjust Grid Area to this scenario. Hope that make sense.

@nmclain if you do not have further questions related to this topic feel free to close it as solved