基础框架在移动设备上对元素进行重新排序

Question

我使用的是基础框架3.2。

我的内容区有9列，边栏(在右边)有3列。

当我在移动设备上查看页面时，我的内容区域首先在顶部，然后在内容区域侧栏下面。这当然是默认的网格行为，并按预期工作。

取而代之的是，我想先渲染侧边栏，然后再渲染内容区域。

这有可能吗？

谢谢!

Answer 1

我在Bootstrap中使用了similar technic (它是独立于框架的)。我假设你有一个这样的标记：

​<div class="row">
  <div class="nine columns content">
      <h1>Content</h1>
  </div>
  <div class="three columns sidebar​​">
      <h1>Sidebar</h1>
  </div>
</div>

把侧边栏放在第一位：

<div class="row">
  <div class="three columns sidebar">
      <h1>Sidebar</h1>
  </div>
  <div class="nine columns content">
      <h1>Content</h1>
  </div>
</div>

然后向右浮动：

.sidebar {
  float: right;
}

在移动设备上重置浮点：

@media only screen and (max-width: 767px) {
  .sidebar {
    float: none;
  }
}

查看how it works。