使用 bourbon neat 对列重新排序（平板电脑、台式机）

Question

我正在尝试创建一个页面，其中 "content" 位于顶部（用于移动视图），侧边栏位于下方。

这是我的 html:

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

这是我使用 bourbon 的 scss：

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);
}

我的印象是 "shift" 向右移动（正数）然后向左移动负数。

所以我认为 "content" 是 8 列宽，然后向右移动。所以我的内容会在右边。

似乎正在发生的事情是我的 "content" div 现在位于我的 "sidebar" div 之上：

Answer 1

尝试在您的 .homepage-content 上应用 float: right;：

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

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

参见：http://sassmeister.com/gist/a96439d9062ec6fddd73

使用 bourbon neat 对列重新排序（平板电脑、台式机）

reorder columns with bourbon neat (tablet, desktop)

sass

bourbon