Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <div class="primary-content">
    Primary Content
  </div>
  <div class="secondary-content">
    Secondary Content
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Susy (v2.1.3)
// ----

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


$breakpoints: (
	small: 480px,
	medium: 720px,
	large: 1024px
);

$susy: (
  columns: 1,
  gutters: 0,
  debug: (
    image: show,
    color: rgba(orange, .25),
    output: background
  ),
);

$small: (
  breakpoint: 480px,
  columns: 2,
  gutters: .125
);
$medium: (
  breakpoint: 720px 1023px,
  columns: 6,
  gutters: .25
);
$large: (
  breakpoint: 1024px,
  container: 1024px,
  columns: 12,
  gutters: .33
);

// $config is a susy config map, I've added 'breakpoint' key:
//   breakpoint takes a list that fits into breakpoint() mixin.
// $columns takes a value that matches Susy's span, location, layout pattern,
//   or $columns takes the word 'container' to call `container()` in
//   in current mq context
// $grid is option: if true, calls `show-grid()` in current mq context

@mixin simple-susy-breakpoint(
  $config,
  $columns,
  $grid: false
) {
  @if map-get($config, breakpoint) == null {
    @warn 'The map you specified does not have a breakpoint value.';
  } @else {
    $breakpoint: map-get($config, breakpoint);
    @include susy-breakpoint($breakpoint, $config) {
      @if $columns == container {
        @include container;
        @if $grid == true {
          @include show-grid;
        }
      } @else {
        @include span($columns);
      }
    }
  }
}

.container {
  min-height: 96vh;
  @include container;
  @include show-grid;
  @include simple-susy-breakpoint($small, container, true);
  @include simple-susy-breakpoint($medium, container, true);
  @include simple-susy-breakpoint($large, container, true);
}
.primary-content {
  @include span(1);
  @include simple-susy-breakpoint($small, 2);
  @include simple-susy-breakpoint($medium, 4);
  @include simple-susy-breakpoint($large, 8);
}
.secondary-content {
  @include span(1);
  @include simple-susy-breakpoint($small, 2);
  @include simple-susy-breakpoint($medium, 2 last);
  @include simple-susy-breakpoint($large, 4 last);
}

SassMeister-output.css

.container {
  min-height: 96vh;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to right, rgba(255, 165, 0, 0.25), rgba(255, 192, 77, 0.25) 100%, transparent 100%);
  background-size: 100%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
  background-image: linear-gradient(to right, rgba(255, 165, 0, 0.25), rgba(255, 192, 77, 0.25) 100%, transparent 100%);
  background-size: 100%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}
.container:after {
  content: " ";
  display: block;
  clear: both;
}
@media (min-width: 480px) {
  .container {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-image: linear-gradient(to right, rgba(255, 165, 0, 0.25), rgba(255, 192, 77, 0.25) 88.88889%, transparent 88.88889%);
    background-size: 52.94118%;
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
    background-image: linear-gradient(to right, rgba(255, 165, 0, 0.25), rgba(255, 192, 77, 0.25) 88.88889%, transparent 88.88889%);
    background-size: 52.94118%;
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
  }
  .container:after {
    content: " ";
    display: block;
    clear: both;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .container {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-image: linear-gradient(to right, rgba(255, 165, 0, 0.25), rgba(255, 192, 77, 0.25) 80%, transparent 80%);
    background-size: 17.24138%;
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
    background-image: linear-gradient(to right, rgba(255, 165, 0, 0.25), rgba(255, 192, 77, 0.25) 80%, transparent 80%);
    background-size: 17.24138%;
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
  }
  .container:after {
    content: " ";
    display: block;
    clear: both;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    background-image: linear-gradient(to right, rgba(255, 165, 0, 0.25), rgba(255, 192, 77, 0.25) 75.18797%, transparent 75.18797%);
    background-size: 8.50928%;
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
    background-image: linear-gradient(to right, rgba(255, 165, 0, 0.25), rgba(255, 192, 77, 0.25) 75.18797%, transparent 75.18797%);
    background-size: 8.50928%;
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
  }
  .container:after {
    content: " ";
    display: block;
    clear: both;
  }
}

.primary-content {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}
@media (min-width: 480px) {
  .primary-content {
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .primary-content {
    width: 65.51724%;
    float: left;
    margin-right: 3.44828%;
  }
}
@media (min-width: 1024px) {
  .primary-content {
    width: 65.96289%;
    float: left;
    margin-right: 2.11132%;
  }
}

.secondary-content {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}
@media (min-width: 480px) {
  .secondary-content {
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .secondary-content {
    width: 31.03448%;
    float: right;
    margin-right: 0;
  }
}
@media (min-width: 1024px) {
  .secondary-content {
    width: 31.92578%;
    float: right;
    margin-right: 0;
  }
}

SassMeister-rendered.html

<div class="container">
  <div class="primary-content">
    Primary Content
  </div>
  <div class="secondary-content">
    Secondary Content
  </div>
</div>