Mixin for Bourbon + Neat to reset margins and omega when changing media queries. Call on a collection with parent class .columns (feel free to argue about my use of figcaption).

bourbon-with-neat.css

/* This is the CSS output by the SCSS file */

.columns {
  *zoom: 1;
}
.columns:before, .columns:after {
  content: " ";
  display: table;
}
.columns:after {
  clear: both;
}
.columns.six-wide > * {
  margin-right: 1.69492%;
  clear: none;
  display: block;
  float: left;
  margin-right: 1.69492%;
  width: 49.15254%;
}
.columns.six-wide > *:last-child {
  margin-right: 0;
}
.columns.six-wide > *:nth-child(2n) {
  margin-right: 0;
}
.columns.six-wide > *:nth-child(2n+1) {
  clear: left;
}

@media screen and (min-width: 480px) {
  .columns.six-wide > * {
    margin-right: 1.69492%;
    clear: none;
    display: block;
    float: left;
    margin-right: 1.69492%;
    width: 23.72881%;
  }
  .columns.six-wide > *:last-child {
    margin-right: 0;
  }
  .columns.six-wide > *:nth-child(4n) {
    margin-right: 0;
  }
  .columns.six-wide > *:nth-child(4n+1) {
    clear: left;
  }
}
@media screen and (min-width: 768px) {
  .columns.six-wide > * {
    margin-right: 1.69492%;
    clear: none;
    display: block;
    float: left;
    margin-right: 1.69492%;
    width: 15.25424%;
  }
  .columns.six-wide > *:last-child {
    margin-right: 0;
  }
  .columns.six-wide > *:nth-child(6n) {
    margin-right: 0;
  }
  .columns.six-wide > *:nth-child(6n+1) {
    clear: left;
  }
}
.columns.four-wide > * {
  width: 100%;
}

@media screen and (min-width: 480px) {
  .columns.four-wide > * {
    margin-right: 1.69492%;
    clear: none;
    display: block;
    float: left;
    margin-right: 1.69492%;
    width: 49.15254%;
  }
  .columns.four-wide > *:last-child {
    margin-right: 0;
  }
  .columns.four-wide > *:nth-child(2n) {
    margin-right: 0;
  }
  .columns.four-wide > *:nth-child(2n+1) {
    clear: left;
  }
}

@media screen and (min-width: 768px) {
  .columns.four-wide > * {
    margin-right: 1.69492%;
    clear: none;
    display: block;
    float: left;
    margin-right: 1.69492%;
    width: 23.72881%;
  }
  .columns.four-wide > *:last-child {
    margin-right: 0;
  }
  .columns.four-wide > *:nth-child(4n) {
    margin-right: 0;
  }
  .columns.four-wide > *:nth-child(4n+1) {
    clear: left;
  }
}

figure {
  img {
    width: 100%;
  }
}

bourbon-with-neat.scss

// Settings
$grid-columns: 12;

$root-font-size-int: 20; // unsigned px
$root-font-size: $root-font-size-int * 1px;

// Change the grid settings
$column: 80px;
$gutter: 20px;
$grid-columns: 12;
$max-width: em(1180,$root-font-size-int);

// Set breakpoints
$flashlight: new-breakpoint(min-width 480px $grid-columns);
$chandelier: new-breakpoint(min-width 768px $grid-columns);


// Mixin
@mixin griddy($cols) {
  > * {
    @if($cols > 1) {
      margin-right: flex-gutter();
      clear: none;
      @include span-columns($grid-columns / $cols);
      @include omega($cols*1n);
    }
    else {
      @include fill-parent();
    }
  }
}


// Use mixin
.columns {
  @include clearfix;

  &.six-wide {
    @include griddy(2);
    @include media($flashlight) {
      @include griddy(4);
    }
    @include media($chandelier) {
      @include griddy(6);
    }
  }

  &.four-wide {
    @include griddy(1);
    @include media($flashlight) {
      @include griddy(2);
    }
    @include media($chandelier) {
      @include griddy(4);
    }
  }

}

// For prettiness
figure {
  text-align: center;
  margin-bottom: 1rem;
  img {
    width: 100%;
  }
}

markup.html

<!-- Example markup -->

<div class="columns four-wide">

  <figure>
    <img src="http://www.fillmurray.com/300/300">
    <figcaption>
      Bill Murray<br>
      555-555-1234
    </figcaption>
  </figure>

  <figure>
    <img src="http://www.fillmurray.com/301/300">
    <figcaption>
      Bill Murray<br>
      555-555-1234
    </figcaption>
  </figure>

  <figure>
    <img src="http://www.fillmurray.com/302/300">
    <figcaption>
      Bill Murray<br>
      555-555-1234
    </figcaption>
  </figure>

  <figure>
    <img src="http://www.fillmurray.com/303/300">
    <figcaption>
      Bill Murray<br>
      555-555-1234
    </figcaption>
  </figure>

  <figure>
    <img src="http://www.fillmurray.com/305/300">
    <figcaption>
      Bill Murray<br>
      555-555-1234
    </figcaption>
  </figure>

  <figure>
    <img src="http://www.fillmurray.com/306/300">
    <figcaption>
      Bill Murray<br>
      555-555-1234
    </figcaption>
  </figure>

</div>