Designing a complex responsive layout

Let's imagine we've emerged from client meetings with a plan to organize the home page content in three tiers, ranked by importance.

In medium and wide viewports, this content will be laid out in three columns as seen in the following screenshot:

In a narrow viewport, these will be laid out one after another, in a single vertical column:

And in a small, tablet-width viewport, we'll arrange the content in two side-by-side columns, with the third tier of content laid out beneath it as a horizontal row as seen in the following screenshot:

To get us started, I've provided the basic markup for three equal columns. Let's review what we have and then adapt it to the needs of this design. We'll begin with the three-column layout for medium and wide viewports.

Adjusting the medium and wide layout

Currently, in medium and wide viewports, our three columns are equal in width, font size, and button size and color. As a result, the presentation lacks visual hierarchy,...