Making the How it Works section responsive

In the previous chapter, we built the How it Works section to be a collection of rows that showcased a screenshot and a description of a key part of the SecondPlate app experience. On our base breakpoint of 1440px, the preview resembles Figure 6.1, where the image and text alternate their positions from the left to the right and then back to the left again:

Figure 6.1 – The How it Works section on its base breakpoint

We're going to ensure that this section looks good on three other important breakpoints: large screens (1920px wide and up), tablet screens (768px wide), and mobile screens (320px wide). Since there are in fact many other screen sizes in between these main breakpoints that audiences may be viewing the website on, we'll also take a brief look at how to account for them (including even Nintendo DS screens).

Let's begin with large screens.

Large screen sizes

Recall that our...