基礎框架在手機上重新排序元素

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。