How to overwrite bourbon neat Omega()

Question

I'm currently working on a layout that requires a different layout on mobile, tablet and desktop.

1. Mobile - Stacked
2. Tablet - two column layout
3. desktop - three column

I'm finding that my two columns layout sticks all the way up to my desktop layout which shouldn't be the case. It seems that the tablet omega(2n)sticks all the way up to my desktop layout... where it should be omega(3n) – I thought it would override the Omega(2n). How do I resolve this? I could edit my breakpoints to include max value but it becomes more leg work from there which I think is unnecessary. Here is the pen

HTML

<div class="boxes">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
</div>

SCSS

$mq-s :  em(400);
$mq-m :  em(768);
$mq-l :  em(960);
$mq-xl:  em(1700);

// Breakpoints
$mobile:            new-breakpoint(min-width $mq-s 6);
$tablet:            new-breakpoint(min-width $mq-m 12);
$desktop:           new-breakpoint(min-width $mq-l 12);
$large-desktop:     new-breakpoint(min-width $mq-xl 12);

.boxes{
  @include outer-container;
}

@include media ($tablet){
  li {
    background: tint(red,50%);
    margin-bottom: 20px;
    @include span-columns(6);
    @include omega(2n);
    height: 40px;
  }
}

@include media ($desktop){
  li{
      @include span-columns(4);
      @include omega(3n);
    }
}

Answer 1

The problem is your $tablet media query doesn't have a max-width so it can still conflict with the $desktop media query. Add a max-width like this and it works as you want.

$tablet:    new-breakpoint(min-width $mq-m max-width 959px 12);

I find it easier to organise my media queries within elements like this

li {
  background: tint(red,50%);
  height: 40px;
  margin-bottom: 20px;    

  @include media($tablet){
    @include span-columns(6);
    @include omega(2n);
  }

  @include media($desktop){
    @include span-columns(4);
    @include omega(3n);    
  }
} 

Now your colours, heights and bottom margins are shared across screen sizes but the columns respond to media queries. No media query necessary for mobile as it becomes default.