What is correct markup for float-spans within breakpoints in a singularity grid

I am learning about breakpoints, singularity and float-spans but I can not get them to play nicely together.

For simplicity I am sticking with a 12 column grid and I have avoided any nesting. I want a display of six column float span at the $tablet breakpoint and a three column span at the $desktop breakpoint. In the gist below I refer to these alternative displays as a breakpoint groups.

http://sassmeister.com/gist/1cca897661125564db41

Each breakpoint group works independently of other, but when combined in the same scss something goes wrong. Not sure what I am doing wrong. Wrong scss or some conflict between the n-th values?

EDIT

Here is the right way to do it. Thanks Jan

http://sassmeister.com/gist/04adc7d2c992f3d48736

As it is using min-width some styles are inherited from the lower breakpoints to the larger ones, you need to override the class settings in the higher breakpoints, in your example is clear:right on every second element and then some width setting is overridden as well since .tile:nth-child(2n+2) is stronger that .tile in higher breakpoint... you can fix it by doing something similar to this:

@include breakpoint($desktop, true) {
  .tile {
  border: 1px solid;
  margin-bottom: 20px;
  &:nth-child(n){
      @include float-span(3);
      clear:none;
  }
  &:nth-child(4n+4) {
      @include float-span(3,last);
  }
}
}

&:nth-child(n) basically reset the settings for sizes and &:nth-child(4n+4) fixes the last