Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="l-example">
  <div class="l-example__a">A<br/>&nbsp;</div>
  <div class="l-example__b">B</div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// Zen Grids (v1.4)
// ----

@import "zen";



  $zen-column-count: 12;
$zen-gutter-width: 30px;
$zen-auto-include-item-base: false;
.l-example__a {
  background: #fcc;
  @include zen-grid-item(12, 1);
}
.l-example__b {
  background: #cfc;
  @include zen-grid-item(12, 1);
}


@media screen and (min-width: 480px) {

.l-example {
  @include zen-grid-container;
}
.l-example__a, .l-example__b, .l-example__c {
  @include zen-grid-item-base;
}
.l-example__a {
  background: #fcc;
  @include zen-grid-item(8, 1);
}
.l-example__b {
  background: #cfc;
  @include zen-grid-item(4, 1, right);
}


}

SassMeister-output.css

.l-example__a {
  background: #fcc;
  float: left;
  width: 100%;
  margin-left: 0%;
  margin-right: -100%;
}

.l-example__b {
  background: #cfc;
  float: left;
  width: 100%;
  margin-left: 0%;
  margin-right: -100%;
}

@media screen and (min-width: 480px) {
  .l-example:before, .l-example:after {
    content: "";
    display: table;
  }
  .l-example:after {
    clear: both;
  }

  .l-example__a, .l-example__b, .l-example__c {
    padding-left: 15px;
    padding-right: 15px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
  }

  .l-example__a {
    background: #fcc;
    float: left;
    width: 66.66667%;
    margin-left: 0%;
    margin-right: -66.66667%;
  }

  .l-example__b {
    background: #cfc;
    float: right;
    width: 33.33333%;
    margin-right: 0%;
    margin-left: -33.33333%;
  }
}

SassMeister-rendered.html

<div class="l-example">
  <div class="l-example__a">A<br/>&nbsp;</div>
  <div class="l-example__b">B</div>
</div>