Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class='a'>A</div>
<div class='b'>B</div>

SassMeister-input.scss

// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// Breakpoint (v2.5.0)
// Singularity.gs (v1.6.2)
// ----

@import 'singularitygs';
@import 'breakpoint';

$break: 900px;

@include add-grid(2 1);

.a {
  background: green;
  height: 40vh;
  
  @include breakpoint($break) {
    @include grid-span(1, 2);
  }
}


.b {
  background: blue;
  height: 55vh;
  
  @include breakpoint($break) {
    @include grid-span(1, 1);
  }
}

SassMeister-output.css

.a {
  background: green;
  height: 40vh;
}
@media (min-width: 900px) {
  .a {
    width: 30.76923%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}

.b {
  background: blue;
  height: 55vh;
}
@media (min-width: 900px) {
  .b {
    width: 61.53846%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
}

SassMeister-rendered.html

<div class='a'>A</div>
<div class='b'>B</div>