The project here demonstrates basic elements of a Responsive Design Layout as a reference.
It follows the mobile first approach. For small screens all columns are displayed on their own lines.
As the width grows, they are grouped in lines, but they are also re-ordered.
See the main.css for more details.
Tricks that are used:
- Flexbox containers
- Column widths are expressed in relative (%) widths
- Order can change using flex ‘order’ property.
- After the last breakpoint the layout stays the same. We just add margins to left and right