Responsive BS Gallery single column expanding to three columns

I want to display a WP gallery of medium images responsively: single column in mobile and expanding.

This code displays a WP gallery of thumbnails; three small columns on small screens and larger images as window expands:

// Gallery shortcode
.gallery-columns-3 {
  @include make-row();
.gallery-columns-3 .gallery-item {
  @include make-md-column(4);
.gallery-item .landscape {
  @extend .thumbnail;
.gallery-caption {
  display: none;

I’m expecting it’s obvious. Can someone please point me in the right direction?

It was an older version of Sage - 8.2.1 - and I just needed to add Theme support:

  // Enable post formats
          add_theme_support('post-formats', ['aside', 'gallery', 'link', 'image', 'quote', 'video', 'audio']);
          // Enable HTML5 markup support

          add_theme_support('html5', ['caption', 'comment-form', 'comment-list', 'gallery', 'search-form']);

Which I copied from the lib/setup.php page to what in the older version is lib/config.php.

Now beginning to behave as hoped for. Still would like to code so that there can be two columns in between the smallest and larger breakpoints. Insights welcome. (uses LESS but the explanation/logic is on point) (see mixins)

1 Like

Thanks a lot, @cfx. I actually picked up a copy of Designing with Web Standards (3rd edition) from Abe Books based on your linked article. Haven’t had a chance yet to update my code based on your example, but will report back.