breakpoint-nesting.scss

/* Header Area */
.l-branding {
  @include breakpoint($tab) {
    @include grid-span(1, 1);
  }
}
.l-region--header {
  @include breakpoint($tab) {
    @include grid-span(1, 2);
  }
}
.l-region--navigation {
  @include breakpoint($tab) {
    clear: both;
  }
}

/* Content Area */
.l-content {
  @include breakpoint($tab) {
    @include grid-span(2, 1);
  }
}

/* Sidebars */
.one-sidebar {
  @include breakpoint($tab) {
    .l-region--sidebar-first,
    .l-region--sidebar-second {
      @include grid-span(2, 1);
    }
  }
}
.two-sidebars {
  @include breakpoint($tab) {
    .l-region--sidebar-first,
    .l-region--sidebar-second {
      @include grid-span(2, 1);
    }
    .l-region--sidebar-first {
      @include isolation-span(1, 1, 'both');
    }
    .l-region--sidebar-second {
      @include grid-span(1, 2);
    }
  }
}