HOW RESPONSIVE DESIGN WORKS

***View this page on a desktop or laptop for the instructions to make sense***

This shows you how the content reflows inside the grid from top to bottom and from right to left (yes the content on the far right gets pushed underneath and to the left of the content above when the screen size gets slimmer).

NOTE:  how when moving from Desktop to tablet width, box 4 drops down underneath box no. 1.

So on...
1280px screen width and above, the layout is:
12345
‍
Desktop layout is:
1234
5

Which changes to tablet like this (with the 3 & 4 popping underneath the 1 & 2 etc):
123
45

and mobile in landscape orientation like this:
12
34
5

and finally to mobile layout like this with the boxes vertical:
1
2
3
4
5

.. grab your phone and type in this link to view the mobile version for yourself at www.artfuly.com/responsive-design‍
‍
This video shows how the fluid grid in a responsive website reflows from Desktop size, to tablet size to mobile size
(Watch from the 4 to 6 minutes only)

and here is a site showing how designs change across different widths https://mediaqueri.es
‍Open any of the listed sites in a browser and pull the right hand side of the browser down to a very slim mobile width (on your desktop) [notice how the design reflows between the large (desktop), Medium (tablet), and small (mobile) screen sizes [watch how this works at various different points down the page]

Hopefully now you have a basic idea of how content reflows for different screens sizes, which will enable you to 'think through' things when you're creating your designs in Figma.

For further help, see below.