Generated by SassMeister.com.

SassMeister-input-HTML.html

<section class="container">
	<h1 class="section-title">Releases</h1>
	<div class="test-col">Test! #1</div>
	<div class="test-col">Test! #2</div>
	<div class="test-col">Test! #3</div>
	<div class="test-col">Test! #4</div>
	<div class="test-col">Test! #5</div>
	<div class="test-col">Test! #6</div>
	<div class="test-col">Test! #7</div>
	<div class="test-col">Test! #8</div>
	<div class="test-col">Test! #9</div>
	<div class="test-col">Test! #10</div>
	<div class="test-col">Test! #11</div>
	<div class="test-col">Test! #12</div>
</section>

SassMeister-input.scss

// ----
// Sass (v3.3.1)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.1)
// Susy (v2.0.0)
// ----

@import "susy";
@import "breakpoint";

$susy: (
  container-position: center,
  gutters: .25,
  column-width: 4.25em,
  global-box-sizing: border-box,
  use-custom: (
    box-sizing: true,

  )
);

$bp-med: container(6);
$bp-lrg: container(9);
$cont-med: 8;
$cont-lrg: 12;

.container {
	@include container(6);
	@include breakpoint($bp-med) {
		max-width: container(8);
	}
	@include breakpoint($bp-lrg) {
		max-width: container(12);
	}
}

.test-col {
	
	@include span(2 of 6);
	&:nth-child(3n) { @include last; }
	&:nth-child(n+7) { display: none; }
	@include breakpoint($bp-med) {
		$test-col-med: 2 of 8;
		@include span($test-col-med);
		&:nth-child(3n) { @include span($test-col-med); }
		&:nth-child(4n) { @include last; }
		&:nth-child(-n+8) { display: block; }

	}
	@include breakpoint($bp-lrg) {
		$test-col-lrg: 2 of 12;
		@include span($test-col-lrg);
		&:nth-child(3n) { @include span($test-col-lrg); }
		&:nth-child(4n) { @include span($test-col-lrg); }
		&:nth-child(6n) { @include last; }
		&:nth-child(n+6) { display: block; }
	}
}

SassMeister-output.css

.container {
  max-width: 30.8125em;
  margin-left: auto;
  margin-right: auto;
}
.container::after {
  content: " ";
  display: block;
  clear: both;
}
@media (min-width: 30.8125em) {
  .container {
    max-width: 41.4375em;
  }
}
@media (min-width: 46.75em) {
  .container {
    max-width: 62.6875em;
  }
}

.test-col {
  width: 31.0344827586%;
  float: left;
  margin-right: 3.4482758621%;
}
.test-col:nth-child(3n) {
  float: right;
  margin-right: 0;
}
.test-col:nth-child(n+7) {
  display: none;
}
@media (min-width: 30.8125em) {
  .test-col {
    width: 23.0769230769%;
    float: left;
    margin-right: 2.5641025641%;
  }
  .test-col:nth-child(3n) {
    width: 23.0769230769%;
    float: left;
    margin-right: 2.5641025641%;
  }
  .test-col:nth-child(4n) {
    float: right;
    margin-right: 0;
  }
  .test-col:nth-child(-n+8) {
    display: block;
  }
}
@media (min-width: 46.75em) {
  .test-col {
    width: 15.2542372881%;
    float: left;
    margin-right: 1.6949152542%;
  }
  .test-col:nth-child(3n) {
    width: 15.2542372881%;
    float: left;
    margin-right: 1.6949152542%;
  }
  .test-col:nth-child(4n) {
    width: 15.2542372881%;
    float: left;
    margin-right: 1.6949152542%;
  }
  .test-col:nth-child(6n) {
    float: right;
    margin-right: 0;
  }
  .test-col:nth-child(n+6) {
    display: block;
  }
}

SassMeister-rendered.html

<section class="container">
	<h1 class="section-title">Releases</h1>
	<div class="test-col">Test! #1</div>
	<div class="test-col">Test! #2</div>
	<div class="test-col">Test! #3</div>
	<div class="test-col">Test! #4</div>
	<div class="test-col">Test! #5</div>
	<div class="test-col">Test! #6</div>
	<div class="test-col">Test! #7</div>
	<div class="test-col">Test! #8</div>
	<div class="test-col">Test! #9</div>
	<div class="test-col">Test! #10</div>
	<div class="test-col">Test! #11</div>
	<div class="test-col">Test! #12</div>
</section>