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

Question

我正在使用基础框架 3.2。

我的内容区域占用 9 列，侧栏（右侧）占用 3 列。

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

相反，我想先渲染侧边栏，然后在内容区域下方。

那可能吗？

谢谢！

Answer 1

我为 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;
}

在移动设备上重置浮动：

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

看看它是如何工作的。