Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="wrap">
<div class="content"><div class="inner">Content content content content content content content content content</div> </div>
<div class="sidebar side-a"><div class="inner">sidebar A, sidebar A, sidebar A, sidebar A </div></div>
<div class="sidebar side-b"><div class="inner">sidebar B, sidebar B, sidebar B, sidebar B </div></div>
</div>

SassMeister-input.sass

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

@import "singularitygs"
@import "breakpoint"

div 
  height: 200px
  box-sizing: border-box
  .inner
    padding: 10px

  
.wrap
  max-width: 900px
  margin: 0 auto
  @include add-grid(12)
  @include add-gutter(20px)
  .side-a
    margin-bottom: 20px
    .inner
      background: #CDEAFF

  .side-b .inner
    background: #71BAEF
  .content 
    margin-bottom: 20px
    .inner
      background: #79BAF0

  +breakpoint(800px 1200px)
    .side-a,
    .side-b
      @include grid-span(4, 1)
      clear: left
    .content
      @include grid-span(8, 5)
      
  +breakpoint(1200px)
    .side-a
      @include grid-span(3, 1)
    .side-b
      @include grid-span(3, 10)
    .content
      @include grid-span(6, 4)

SassMeister-output.css

div {
  height: 200px;
  box-sizing: border-box;
}
div .inner {
  padding: 10px;
}

.wrap {
  max-width: 900px;
  margin: 0 auto;
}
.wrap .side-a {
  margin-bottom: 20px;
}
.wrap .side-a .inner {
  background: #CDEAFF;
}
.wrap .side-b .inner {
  background: #71BAEF;
}
.wrap .content {
  margin-bottom: 20px;
}
.wrap .content .inner {
  background: #79BAF0;
}
@media (min-width: 800px) and (max-width: 1200px) {
  .wrap .side-a,
  .wrap .side-b {
    width: 33.33333%;
    float: left;
    margin-right: -100%;
    clear: none;
    padding-right: 20px;
    clear: left;
  }
  .wrap .content {
    width: 66.66667%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
  }
}
@media (min-width: 1200px) {
  .wrap .side-a {
    width: 25%;
    float: left;
    margin-right: -100%;
    clear: none;
    padding-right: 20px;
  }
  .wrap .side-b {
    width: 25%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
  }
  .wrap .content {
    width: 50%;
    float: left;
    margin-right: -100%;
    margin-left: 25%;
    clear: none;
    padding-right: 20px;
  }
}

SassMeister-rendered.html

<div class="wrap">
<div class="content"><div class="inner">Content content content content content content content content content</div> </div>
<div class="sidebar side-a"><div class="inner">sidebar A, sidebar A, sidebar A, sidebar A </div></div>
<div class="sidebar side-b"><div class="inner">sidebar B, sidebar B, sidebar B, sidebar B </div></div>
</div>