Basic 3 column layout with SingularityGS. Generated by SassMeister.com.

SingularityGS-layout-output.css

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

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

.box {
  text-shadow: 0 0 0.25em #a42a5f;
  background-color: #E86EA4;
  color: white;
  margin-bottom: 1em;
  min-height: 100px;
  padding: 1em;
}

.l-constrained {
  *zoom: 1;
  width: 95%;
  margin: 0 auto;
}
.l-constrained:after {
  content: "";
  display: table;
  clear: both;
}

@media (min-width: 980px) {
  .l-content {
    width: 47.36842%;
    float: left;
    margin-right: -100%;
    margin-left: 26.31579%;
    clear: none;
  }
}

@media (min-width: 980px) {
  .l-sidebar-first {
    width: 23.68421%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
}

@media (min-width: 980px) {
  .l-sidebar-second {
    width: 23.68421%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}

@media (min-width: 980px) {
  .sidebar-third-right-split .l-content {
    width: 64.86486%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
  .sidebar-third-right-split .l-sidebar-first,
  .sidebar-third-right-split .l-sidebar-second {
    width: 32.43243%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
  .sidebar-third-right-split .l-sidebar-second {
    clear: right;
  }
}

SingularityGS-layout.html

<div class="l-constrained">
  <div class="l-content box">This is my main content</div>
  <div class="l-sidebar-first box">Sidebar First</div>
  <div class="l-sidebar-second box">Sidebar Second</div>
</div>

SingularityGS-layout.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Singularity.gs (v1.4.0)
// Toolkit (v2.6.0)
// ----

@import "compass";
@import "breakpoint";
@import "singularitygs";
@import "toolkit";

// Use 'border-box' for the box model.
@import "toolkit/kickstart";

//setup breakpoint variables for media queries
$bp-small-up: 480px;
$bp-narrow-up: 768px;
$bp-medium-up: 980px;
$bp-wide-up: 1200px;

//box class for visual display
.box {
  @include text-shadow(0 0 0.25em #A42A5F);
  background-color: #E86EA4;
  color: white;
  margin-bottom: 1em;
  min-height: 100px;
  padding: 1em;
}

// Setup singularity grid
@include add-grid(1); //this will show as default mobile
@include add-grid(3 6 3 at $bp-medium-up); //this will show at the medium breakpoint
@include add-gutter(1/3);

//Container
.l-constrained {
  @include clearfix;
  width: 95%;
  margin: 0 auto;
}

//main content
.l-content {
  @include breakpoint($bp-medium-up) {
    @include grid-span(1, 2);
  }
}

//sidebars
.l-sidebar-first {
  @include breakpoint($bp-medium-up) {
    @include grid-span(1, 1);
  }
}
.l-sidebar-second {
  @include breakpoint($bp-medium-up){
    @include grid-span(1, 3);
  }
}

//sidebar 1/3 split
//add this class to the parent div
.sidebar-third-right-split {
  @include add-grid(8 4 at $bp-medium-up);

  @include breakpoint($bp-medium-up) {
    .l-content {
      @include grid-span(1, 1);
    }
    .l-sidebar-first,
    .l-sidebar-second {
      @include grid-span(1, 2);
    }
    .l-sidebar-second {
      clear: right;
    }
  }
}

Play with this gist on SassMeister.

<script src="http://cdn.sassmeister.com/js/embed.js" async></script>