index.html

<h3 class="sol-head">Communication</h3>
<p class="sol-desc">Some days you get the bear, and some days the bear gets you. Your head is not an artifact! But the probability of making a six is no greater than that of rolling a seven. Commander William Riker of the Starship Enterprise. You enjoyed that. Wait a minute - you've been declared dead. You can't give orders around here. Fate protects fools, little children and ships named Enterprise. Your shields were failing, sir. I guess it's better to be lucky than good. And blowing into maximum warp speed, you appeared for an instant to be in two places at once. They were just sucked into space. I will obey your orders. I will serve this ship as First Officer. And in an attack against the Enterprise, I will die with this crew. But I will not break my oath of loyalty to Starfleet.</p>
<aside class="sol-box">
    <ul>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
    </ul>
</aside>

style.scss

@import "compass";
@import "breakpoint";
@import "singularitygs";

$grids: 6;
$grids: add-grid(9 at 675px);
$grids: add-grid(12 at 850px);
$grids: add-grid(15 at 1075px);
$grids: add-grid(18 at 1200px);

$gutters: 1/3;
$output:'isolation';

.sol-head {
	@include breakpoint(675px 849px) {
		@include isolation-span(9, 1, 'both');
	}
	@include breakpoint(850px 1074px) {
		@include isolation-span(12, 1, 'both');
	}
	@include breakpoint(1075px 1199px) {
		@include isolation-span(15, 1, 'both');
	}
	@include breakpoint(1200px) {
		@include isolation-span(18, 1, 'both');
	}
}

.sol-box {
		@include breakpoint(675px 849px) {
			@include isolation-span(9,1,'both');
		}
		@include breakpoint(850px 1074px) {
			@include isolation-span(4, 9, 'right');
		}
		@include breakpoint(1075px 1199px) {
			@include isolation-span(4, 12, 'right');
		}
		@include breakpoint(1200px) {
			@include isolation-span(6, 13, 'right');
		}
}

.sol-desc {
		@include breakpoint(675px 849px) {
			@include isolation-span(9, 1,'both');
		}
		@include breakpoint(850px 1074px) {
			@include isolation-span(8, 1,'left');
		}
		@include breakpoint(1075px 1199px) {
			@include isolation-span(11, 1,'left');
		}
		@include breakpoint(1200px) {
			@include isolation-span(12, 1,'left');
		}
}