Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <div class="container__item--1">item</div>
  <div class="container__item--2">item</div>
  <div class="container__item--3">item</div>
  <div class="container__item--4">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;
  overflow: hidden;
}

@include add-grid(1 1);
@include add-grid(1 2 1 3 at 800px);
@include add-gutter(1/10);

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

.container__item--1 {
  @extend %container__item;
  @include grid-span(1, 1);
  @include breakpoint(800px) {
    @include grid-span(1, 1);
  }
}

.container__item--2 {
  @extend %container__item;
  @include grid-span(1, 2);
  @include breakpoint(800px) {
    @include grid-span(1, 2);
  }
}

.container__item--3 {
  @extend %container__item;
  @include grid-span(1, 1);
  clear: left;
  @include breakpoint(800px) {
    @include grid-span(1, 3);
  }
}

.container__item--4 {
  @extend %container__item;
  @include grid-span(1, 2);
  @include breakpoint(800px) {
    @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;
  overflow: hidden;
}

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

.container__item--1 {
  width: 47.61905%;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
}
@media (min-width: 800px) {
  .container__item--1 {
    width: 13.69863%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
}

.container__item--2 {
  width: 47.61905%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}
@media (min-width: 800px) {
  .container__item--2 {
    width: 27.39726%;
    float: left;
    margin-right: -100%;
    margin-left: 15.06849%;
    clear: none;
  }
}

.container__item--3 {
  width: 47.61905%;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
  clear: left;
}
@media (min-width: 800px) {
  .container__item--3 {
    width: 13.69863%;
    float: left;
    margin-right: -100%;
    margin-left: 43.83562%;
    clear: none;
  }
}

.container__item--4 {
  width: 47.61905%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}
@media (min-width: 800px) {
  .container__item--4 {
    width: 41.09589%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}

SassMeister-rendered.html

<div class="container">
  <div class="container__item--1">item</div>
  <div class="container__item--2">item</div>
  <div class="container__item--3">item</div>
  <div class="container__item--4">item</div>
</div>