reorder columns with bourbon neat (tablet, desktop)

Question

I'm trying to make a page with "content" on the top (for mobile view) and the sidebar below.

Here is my html:

<section>
  <div class="homepage-content"></div>
  <div class="homepage-sidebar"></div>
</section>

Here is my scss using bourbon:

section {
      @include outer-container;
}

.homepage-content {
      @include span-columns(8);
      @include shift(4); /* this block should be on the RIGHT on desktop/tablet view */
    }

.homepage-sidebar {
      @include span-columns(4);
      @include shift(-8);
}

I'm under the impression that "shift" shifts to the right (positive) and then to the left for negative numbers.

So I would think that the "content" is 8 columns wide and then shifted over to the right. So my content would be on the right-hand side.

What seems to be happening is that my "content" div is now sitting on top of my "sidebar" div:

Answer 1

Try to apply a float: right; on your .homepage-content:

.homepage-content {
      @include span-columns(8); float:right;
   }

.homepage-sidebar {
      @include span-columns(4);
}

See: http://sassmeister.com/gist/a96439d9062ec6fddd73