Source ordering, adding columns

SassMeister-input-HTML.html

<div class="container">
  <div class="sidebar-primary"></div>
  <div class="sidebar-secondary"></div>
  <div class="content-area"></div>
  <div class="sidebar-tertiary"></div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.2)
// Singularity.gs (v1.2.0)
// Singularity Extras (v1.0.0.alpha.3)
// Toolkit (v2.0.1)
// ----

@import "breakpoint";
@import "compass";
@import "toolkit";
@import "singularitygs";
@import "singularity-extras";

@include add-grid(1 1 4 1 at 480px);
@include add-grid(4 3 1 2 at 768px);
@include add-gutter(0.1);

.container {
  max-width: 1200px;
  margin: 0 auto;
}
.sidebar-primary {
  height: 100vh;
  background: #FA1E07;
  @include breakpoint(480px) {
    @include grid-span (1, 1);
  }
  @include breakpoint(768px) {
    @include grid-span(1,1);
  }
}

.sidebar-secondary {
  height: 100vh;
  background: #520E4B;
  @include breakpoint(480px) {
    @include grid-span(1, 2);
  }
  @include breakpoint(768px) {
    @include grid-span(1,2);
  }
}

.content-area {
  height: 100vh;
  background: #080808;
  @include breakpoint(480px) {
    @include grid-span(1,3);
  }
  @include breakpoint(768px) {
    @include grid-span(1,3);
  }
}

.sidebar-tertiary {
  height: 100vh;
  background: #FAE503;
  @include breakpoint(480px) {
    @include grid-span(1, 4);
  }
  @include breakpoint(768px) {
    @include grid-span(1,4);
  }
}

SassMeister-output.css

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.sidebar-primary {
  height: 100vh;
  background: #FA1E07;
}
@media (min-width: 480px) {
  .sidebar-primary {
    width: 13.69863%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
}
@media (min-width: 768px) {
  .sidebar-primary {
    width: 38.83495%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
}

.sidebar-secondary {
  height: 100vh;
  background: #520E4B;
}
@media (min-width: 480px) {
  .sidebar-secondary {
    width: 13.69863%;
    float: left;
    margin-right: -100%;
    margin-left: 15.06849%;
    clear: none;
  }
}
@media (min-width: 768px) {
  .sidebar-secondary {
    width: 29.12621%;
    float: left;
    margin-right: -100%;
    margin-left: 39.80583%;
    clear: none;
  }
}

.content-area {
  height: 100vh;
  background: #080808;
}
@media (min-width: 480px) {
  .content-area {
    width: 54.79452%;
    float: left;
    margin-right: -100%;
    margin-left: 30.13699%;
    clear: none;
  }
}
@media (min-width: 768px) {
  .content-area {
    width: 9.70874%;
    float: left;
    margin-right: -100%;
    margin-left: 69.90291%;
    clear: none;
  }
}

.sidebar-tertiary {
  height: 100vh;
  background: #FAE503;
}
@media (min-width: 480px) {
  .sidebar-tertiary {
    width: 13.69863%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}
@media (min-width: 768px) {
  .sidebar-tertiary {
    width: 19.41748%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}

SassMeister-rendered.html

<div class="container">
  <div class="sidebar-primary"></div>
  <div class="sidebar-secondary"></div>
  <div class="content-area"></div>
  <div class="sidebar-tertiary"></div>
</div>