Let's begin by positioning our captions as overlays atop their respective customer photos:

Scroll down and see how the results look in the other review items.

Not bad! However, we can do it one step better.

Looking carefully at the available open space in the preceding images and examining the overlap variations at various viewport widths in your responsive grid, you may want to position each caption in a way that works best for each customer's photo.

This is where the review-item-1, review-item-2, and so on classes become relevant and helpful, as we may use these specific classes to position each caption in a way that fits best with its image. I've added the following lines in the _page-contents.less file:

#impact {
  .review-item-4 .caption {
    top: 0;
    left: 62%;
    right: 10px;
    bottom: auto;
    .reviewer {
      margin-top: 6px;
      text-align: left;
    }
  }
  .review-item-5 .caption {
    top: 0;
    left: 17%;
    right: 10px;
    bottom: auto;
  }
}

The preceding markup adjusts the absolute positioning of each specific caption, which yields results as shown in the following screenshot:

You'll see that I've applied specific positioning values from lines 132 and onwards in the less/_page-contents.less file in the 06_Code_END folder in this chapter's exercise files. As you survey the results, you may disagree with my judgment calls—about positioning, styling, or both. That's fine. Take over and fine-tune from here!

Meanwhile, let's move on toward our masonry layout. The first step will be to specify the widths of our elements. Let's utilize Bootstrap's grid classes for this.

By utilizing Bootstrap's responsive grid classes, we can prepare a two-column layout for small screens using the col-sm-6 class. For medium screens and up, we can shift to a three-column layout using the col-md-4 class.

The resulting class structure for each hreview element will look like the following line:

<div class="hreview review-item-1 thumbnail col-sm-6 col-md-4">

Add these two column classes to each review item.

Save the file, refresh your browser, and expand your window across the small and medium breakpoints. You'll see a result similar to the following screenshot for small viewports:

For medium viewports and higher, you'll see a result similar to the following screenshot:

In the features section discussed earlier, we discovered that when we have grid items of varying heights, they bump into one another and do not automatically create a cohesive grid. We fixed this by giving each element a set height value. But in this section, we want our items to have varying heights. We want a masonry layout, and this requires a bit of JavaScript.

A masonry layout utilizes JavaScript to assess available spaces and fill those spaces with the elements that fit them best, with the goal of producing nicely tiled columns from building blocks of varying heights.

To implement masonry in this design, we'll utilize the excellent JavaScript plugin named Masonry, which has been developed and maintained by David DeSandro:

Recall that the plugins.js file is already linked to your index.html file. Similarly, we've added masonry to our page's available scripts! (While we've added some file size, we have not added any new HTTP requests.)

We'll now initialize masonry in our page using HTML attributes.

In the index.html file, perform the following steps:

Take a geek break by resizing your browser window back and forth across the small and medium breakpoints. Watch the review items reorganize themselves into two or three columns with the animation provided by Masonry.js!

We're very close to accomplishing our client's desired result. However, one of our remaining problems is that we've possibly mismeasured the size of our images. In a small two-column layout, the image that says Smiling Customer5 sticks out just a bit. In the medium and large three-column layout, the image sticks out even more. We could take the image out, but the review of the customer in that image is one of our client's favorites, and she loves this image. So, we're going to make this image fit properly in the viewport.

Thankfully, we have been given permission to do some trimming. And if push comes to shove, other customers are expendable. This gives us something to work with. Let's begin by fixing the three-column layout:

Now let's adjust the image in the two-column layout.

We need to slice these pixels only for the small layout—not extra-small and not medium or large. Thus, we'll need both minimum and maximum values in our media query. Adding this media query below the first query, we can accomplish our goals as shown in the following lines of code:

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    .review-item-5 {
      height: 474px;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
  }

By adding these lines, we have performed the following:

The result works nicely! The following screenshot shows the desired result:

We're looking great!

@media (max-width: @screen-xs-max) {

#impact {
   @media (max-width: @screen-xs-max) {
     .reviews {
    max-width: 400px;
    .center-block();
     }
   }
}