Bourbon Neat - Shift columns to align vertically?

Question

I want to align my columns differently to their HTML source order. I am trying to use shift() to do this, but I am getting problems aligning them horizontally.

To better demonstrate my problem, I put this CodePen together: http://codepen.io/anon/pen/gaBYJB?editors=110

HTML

<h1>Resize the browser</h1>
<p>Mobile should be 1, 2, 3 stacked. But desktop should be 3, 1, 2. They do not align correctly horizontally.</p>
<div class="items">
  <div class="item item_1">1</div>
  <div class="item item_2">2</div>
  <div class="item item_3">3</div>
</div>

SCSS

@import "bourbon";
@import "neat";

$bp: new-breakpoint(min-width 768px 12);

body {

  padding: 20px;

}

.items {

  @include row();

  background: #333;
  padding: 20px;

}

.item {

  @include span-columns(12);

  padding: 20px;
  color: #fff;
  font-size: 22px;
  background: #666;

  &_1 {

    @include media($bp) {
      @include span-columns(3);
      @include shift(6);
    }

  }

  &_2 {

    @include media($bp) {
      @include span-columns(3);
      @include shift(9);
    }

  }

  &_3 {

    @include media($bp) {
      @include span-columns(6);
      @include shift(-12);
    }

  }

}

Mobile should be 1, 2, 3 stacked (already fine). But desktop should be 3, 1, 2. They do not align correctly horizontally.

How can I achieve this layout with correct vertical alignment? Item 1 appears to be pushing the others down.

Answer 1

I was able to code a partial solution by replacing the shift(9) on item 2 to an omega() mixing to remove the right margin (see Codepen). The shift(9) is not necessary because item 2 is pushed by the shift on item 1.

@include omega();
//@include shift(9);

However, Neat seems to still have a problem with the left margin of item 3 being zero. Therefore, a better solution may be to nest columns 1 and 2 and shift the parent and item 3 (see Codepen).

.item_group {
  @include media($bp) {
  @include span-columns(6);
  @include shift(6);
}
...
&_1 {
  @include media($bp) {
    @include span-columns(3 of 6);
  }
}
&_2 {
  @include media($bp) {
    @include span-columns(3 of 6);
  }
}
&_3 {
  @include media($bp) {
    @include span-columns(6);
    @include shift(-12);
  }
}