Main Content Area
On desktop, the sidebar appears to the right. On tablet and mobile, the sidebar moves above the content. This is achieved using CSS Grid and the order property.
The navigation also changes: it becomes a hamburger menu on mobile devices to save space. Click the menu icon in the header to toggle navigation on mobile!
Media Query Breakpoints Used:
- 1024px - Tablet breakpoint
- 768px - Mobile breakpoint
- 480px - Small mobile breakpoint