我正在使用基础框架 3.2。
我的内容区域有 9 列,侧边栏(右侧)有 3 列。
当我在移动设备上查看页面时,我的内容区域首先位于顶部,然后是内容区域下方的侧边栏。这当然是默认的网格行为并按预期工作。
相反,我想先渲染侧边栏,然后再渲染下面的内容区域。
这可能吗?
谢谢!
最佳答案
我用过 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 .
关于css - 移动设备上的基础框架重新排序元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13872352/