Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <div class="container__item">item</div>
  <div class="container__item">item</div>
  <div class="container__item">item</div>
  <div class="container__item">item</div>
  <div style="background: blue;" class="container__item">item</div>
  <div style="background: blue;" class="container__item">item</div>
  <div style="background: blue;" class="container__item">item</div>
  <div style="background: blue;" class="container__item">item</div>
  <div style="background: green;" class="container__item">item</div>
  <div style="background: green;" class="container__item">item</div>
  <div style="background: green;" class="container__item">item</div>
  <div style="background: green;" class="container__item">item</div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Breakpoint (v2.5.0)
// Singularity.gs (v1.5.1)
// Toolkit (v2.7.0)
// ----

@import "breakpoint";
@import "singularitygs";
@import "toolkit/kickstart";

.container {
  max-width: 960px;
  margin: auto;
  background: #eee;
  padding: 1rem 1rem 0;
  overflow: hidden;
}

@include add-grid(1 1);
@include add-grid(1 1 at 500px);
@include add-grid(1 1 1 1 at 800px);

%container__item,
.container__item {
  background: red;
  margin-bottom: 1rem;
  padding: 1rem;
}

.container__item {
  @extend %container__item;
  @include breakpoint(500px) {
    @include add-gutter(1/10);
    &:nth-child(odd) {
      @include grid-span(1, 1);
      clear: right;
    }
    &:nth-child(even) {
      @include grid-span(1, 2);
    }
  }
  @include breakpoint(800px) {
    &:nth-child(4n - 3) {
      @include grid-span(1, 1);
      clear: right;
    }
    &:nth-child(4n - 2) {
      @include grid-span(1, 2);
    }
    &:nth-child(4n - 1) {
      @include grid-span(1, 3);
    }
    &:nth-child(4n) {
      @include grid-span(1, 4);
    }
  }
}

SassMeister-output.css

*, *:before, *:after {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

img, video {
  max-width: 100%;
  height: auto;
}

.container {
  max-width: 960px;
  margin: auto;
  background: #eee;
  padding: 1rem 1rem 0;
  overflow: hidden;
}

.container__item,
.container__item {
  background: red;
  margin-bottom: 1rem;
  padding: 1rem;
}

@media (min-width: 500px) {
  .container__item:nth-child(odd) {
    width: 47.61905%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
    clear: right;
  }
  .container__item:nth-child(even) {
    width: 47.61905%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}
@media (min-width: 800px) {
  .container__item:nth-child(4n - 3) {
    width: 23.25581%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
    clear: right;
  }
  .container__item:nth-child(4n - 2) {
    width: 23.25581%;
    float: left;
    margin-right: -100%;
    margin-left: 25.5814%;
    clear: none;
  }
  .container__item:nth-child(4n - 1) {
    width: 23.25581%;
    float: left;
    margin-right: -100%;
    margin-left: 51.16279%;
    clear: none;
  }
  .container__item:nth-child(4n) {
    width: 23.25581%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}

SassMeister-rendered.html

<div class="container">
  <div class="container__item">item</div>
  <div class="container__item">item</div>
  <div class="container__item">item</div>
  <div class="container__item">item</div>
  <div style="background: blue;" class="container__item">item</div>
  <div style="background: blue;" class="container__item">item</div>
  <div style="background: blue;" class="container__item">item</div>
  <div style="background: blue;" class="container__item">item</div>
  <div style="background: green;" class="container__item">item</div>
  <div style="background: green;" class="container__item">item</div>
  <div style="background: green;" class="container__item">item</div>
  <div style="background: green;" class="container__item">item</div>
</div>