css - 移动设备上的基础框架重新排序元素

Question

我正在使用基础框架 3.2。

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

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

相反，我想先渲染侧边栏，然后再渲染下面的内容区域。

这可能吗？

谢谢!

Answer 1

我用过 similar technic对于 Bootstrap(它独立于框架)。我想你有这样的标记:

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

在移动设备上重置 float :

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

查看 how it works .