用波旁威士忌重新排序列（平板电脑，台式机）

Question

我正在尝试在顶部（用于移动视图）和下面的侧边栏创建一个“内容”页面。

这是我的html：

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

这是我使用波旁威士忌的 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);
}

我的印象是“移位”向右移动（正数），然后向左移动负数。

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

似乎正在发生的事情是我的“内容”div 现在位于我的“侧边栏”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