Responsive Layout Example

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