O'Reilly logo

Complete Bootstrap: Responsive Web Development with Bootstrap 4 by Ian Whitley, David Cochran, Bass Jobsen, Matt Lambert

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 shown in the following screenshot:

Designing a complex responsive layout

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

Designing a complex responsive layout

And in a small and medium 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, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required