如需移除,請網站管理者移除.
容器中的一行中有3列。
1:正確的內容– 拉右
2:導航– 拉左
3:主要內容
它在大屏幕上看起來:
------------------------------------------------ | Menu | Content | Right Content | ------------------------------------------------
在較小的屏幕上應該是什麼樣子:
---------------------------- | Menu | Right Content | | |------------------ | | Content | ----------------------------
現在的樣子:
------------------ | Right Content | ------------------ | Menu | Content | ------------------
我認為這只是一個簡單的浮動問題。但我試過幾乎所有的可能性。
引導3
使用Bootstrap 3的網格系統:
<div class="container"> <div class="row"> <div class="col-xs-4">Menu</div> <div class="col-xs-8"> <div class="row"> <div class="col-md-4 col-md-push-8">Right Content</div> <div class="col-md-8 col-md-pull-4">Content</div> </div> </div> </div> </div>
工作示例:http://bootply.com/93614
說明
首先,我們設置兩個列,將保持在原地,無論屏幕分辨率(col-xs- *)。
接下來,我們將較大的右側列分成兩個列,這兩個列將在平板電腦尺寸的設備上相互疊加,並降低(col-md- *)。
最後,我們使用匹配類(col-md- [push | pull] – *)來移動顯示順序。你推第一列超過第二個的數量,並拉第二個數量的第一個。
翻譯自:https://stackoverflow.com/questions/19929213/bootstrap-change-div-order-with-pull-right-pull-left-3-columns
轉載註明原文:css – Bootstrap:使用pull-right,pull-left/3列更改div順序
回覆