New to jQuery/JS and can't figure out what's wrong

.four.columns means that it affects containers with both the "four" and "columns" classes on them.

Placing a space between the two in the css selector would affect containers with the class "columns" that are children of containers with the class "four" - not what you want in this case.

You can access either class separately as well by only specifying one as the selector.

.four.columns {
    /* containers with both classes */
}
.four .columns {
    /* "columns" container inside "four" (not what you want) */
}
.four {
     /* containers with the class "four" */
}
.columns {
     /* containers with the class "columns" */
}

Thanks again, Sara, and sorry for the confusion.

I'm making a portfolio with a 12-column grid. At max width there are three images per row. As the width of the screen shrinks, I want the images to change from three images per row to two images per row. And finally, as the screen gets to mobile size, it needs to change to one image per row.

At max width each image divs is four columns wide, taking up all 12 columns. At medium size, as in my question, I want the divs to take up six columns, so that they fill up the 12 columns and force other images to the next line. My instructor said I could jQuery or Javascript to achieve that, instead of using normal @media queries.

So, my goal is to change the "four" class to a "six" class in the image divs. It's very likely that I'm going about this the wrong way.

If you really want to do this with jQuery instead of media queries you have a couple options.

1) On window resize, you check to see how wide the window is and add and remove the classes if necessary. This requires you to also have a way to go back if they make the browser wider again.

$(window).resize(function() {
  var width = $(this).width();
  if (width > 550 && width <= 801) {
    $('.portfolio').removeClass('four').addClass('six');    
  }
  // do another check here for larger and one for smaller and set those classes 
});

2) You could check on doc ready for a size and set it there. This means that once it's set, it will not change when the user resizes their browser.

$(document).ready(function() {
  var width = $(window).width();
  if (width > 550 && width <= 801) {
    $('.portfolio').removeClass('four').addClass('six');    
  }
});

With the grid set up like you have it, this is going to act strangely because there are three per row now and once you set the class to display two, the third goes under the first two on its own line. The way your page is set up it would make more sense to start with four and go to two if necessary so each row always has the same number of photos.

Thanks very much, Sara. I'll fiddle around with this and fix that row div issue, which makes total sense.