Flexbox Layouting Exercise

In this lesson, we will write a mobile-first responsive layout based on the specification.

We'll cover the following

Layout specification

Write a simple responsive layout according to the following guidelines.

  • The mobile layout should display each block below each other. This is just like our initial setup, except that only the first three blog posts should be visible and the rest should be hidden.
  • At the 600px breakpoint, display two posts in a row, and display all six blog posts. The width of the whole page should be 600px.
  • At the 800px breakpoint, the width of the whole page should be 700px, and there should be three articles in one row.

Drag the width of the screen if needed.

Get hands-on with 1400+ tech skills courses.