CSS - 佈局的順序是否可以響應以及每行的列數？

Question

是否可以將內容框的順序配置爲在引導時靈活，而不僅僅是每行的框數？以下是我試圖實現的響應式佈局。

在過去，我一直爲不同的屏幕尺寸保留不同的內容版本，但重寫有機會改變它的工作方式並引入像這樣的新實踐。

座乙藍色是公司名稱和徽標，需要保持在頂部和中部，一個，而其他內容C，d和˚F將落在B附近。塊E本質上是頁腳文本和小字體 - 版權聲明和一些鏈接等。

如果Bootstrap佈局不可能，請建議一個替代方案來幫助我完成此操作。

內容和佈局要求，比如內容看起來不合我心，我只是試圖遵循一些最佳實踐，並使網站移動平板電腦和桌面瀏覽器友好，以便向前移動它會更簡單保持。謝謝。

Answer 1

我試着實現你的例子，以顯示這可以使用Bootstrap的列排序類來完成，例如col-md-push-4和col-md-pull-4。

這隻適用於箱子高度相同的情況下，請嘗試將.box--high添加到箱子A以查看如果不是這種情況可能會發生什麼樣的問題。這些問題可以通過嵌套Bootstrap的網格類來解決，但是您還需要複製一些框，並使用例如特定的佈局大小來顯示或隱藏它們。 .hidden-xs。

如果您不需要支持舊瀏覽器（IE9和IE10），Flexbox（display: flex）可能是一個選項。見Can I Use。

.box { 
 
    background-color: #d1d1d1; 
 
    margin-bottom: 15px; 
 
    border-radius: 10px; 
 
    color: #fff; 
 
    font-size: 24px; 
 
    line-height: 3em; 
 
    text-align: center; 
 
} 
 

 
.box.box--blue { 
 
    background-color: #9CCCE8; 
 
} 
 

 
.box.box--high { 
 
    height: 5em; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-12 col-md-4 col-md-push-4"> 
 
     <div class="box box--blue">B</div> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4 col-md-pull-4"> 
 
     <div class="box">A</div> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4"> 
 
     <div class="box">C</div> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4"> 
 
     <div class="box">D</div> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-6 col-md-4 col-md-push-4"> 
 
     <div class="box">F</div> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-12 col-md-4 col-md-pull-4"> 
 
     <div class="box">E</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

您可以使用CSS Flexbox的模型。

在父DIV /元素分配： -

parentElement { 
 
    display: flex; /* or inline-flex */ 
 
}

在媒體查詢根據您的訂單分配子元素在以下方面： -

childElement { 
 
    order: 3; /*any integer*/ 
 
} 
 

 
@media (max-width: 900px) { 
 
    childElement { 
 
    order: 1; /*any integer*/ 
 
    } 
 
}