Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <div class="one">one</div>
  <div class="two">two</div>
  <div class="three">three</div>
</div>

SassMeister-input.scss

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

@import "singularitygs";
@import "breakpoint";

//breakpoint setup
$breakpoint-one: 750px;

//grid setup
@include add-grid(1 4 1);
@include add-grid(5 at $breakpoint-one);
@include add-gutter(1/3);
@include sgs-change('debug', true); //for testing. p cool

.container {
  @include background-grid;
  height: 100vh;
  width: 100vw;
  
  div {
    height: 33vh;
  }
}

.one {
  background: rgba(teal, .5);
  @include grid-span(1, 2); //spanning 1 column which is col 2
  @include breakpoint($breakpoint-one) {
    @include grid-span(3, 1);
  }
}

.two {
  background: rgba(yellow, .5);
  @include grid-span(1,3);
}

.three {
  background: rgba(violet, .5);
  margin-top: 33vh;
  @include grid-span(2,1);
}

SassMeister-output.css

.container {
  background-image: linear-gradient(to right, chocolate 0%, chocolate 15%, #dd8e56 15%, #dd8e56 20%, chocolate 20%, chocolate 80.0%, #dd8e56 80.0%, #dd8e56 85.0%, chocolate 85.0%, chocolate);
  height: 100vh;
  width: 100vw;
}
@media (min-width: 750px) {
  .container {
    background-image: linear-gradient(to right, chocolate 0%, chocolate 15.78947%, #dd8e56 15.78947%, #dd8e56 21.05263%, chocolate 21.05263%, chocolate 36.84211%, #dd8e56 36.84211%, #dd8e56 42.10526%, chocolate 42.10526%, chocolate 57.89474%, #dd8e56 57.89474%, #dd8e56 63.15789%, chocolate 63.15789%, chocolate 78.94737%, #dd8e56 78.94737%, #dd8e56 84.21053%, chocolate 84.21053%, chocolate);
  }
}
.container div {
  height: 33vh;
}

.one {
  background: rgba(0, 128, 128, 0.5);
  -sgs-span-settings: ("span": 1, "location": 2, "grid": 1 4 1, "gutter": 0.33333, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
  width: 60.0%;
  float: left;
  margin-right: -100%;
  margin-left: 20%;
  clear: none;
}
@media (min-width: 750px) {
  .one {
    -sgs-span-settings: ("span": 3, "location": 1, "grid": 5, "gutter": 0.33333, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
    width: 57.89474%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
}

.two {
  background: rgba(255, 255, 0, 0.5);
  -sgs-span-settings: ("span": 1, "location": 3, "grid": 1 4 1, "gutter": 0.33333, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
  width: 15%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}

.three {
  background: rgba(238, 130, 238, 0.5);
  margin-top: 33vh;
  -sgs-span-settings: ("span": 2, "location": 1, "grid": 1 4 1, "gutter": 0.33333, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
  width: 80%;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
}

SassMeister-rendered.html

<div class="container">
  <div class="one">one</div>
  <div class="two">two</div>
  <div class="three">three</div>
</div>