帶引導程序的兩節佈局

我正在嘗試爲桌面屏幕製作一個兩段引導程序佈局工作，該工作將變爲移動設備的一個部分。帶引導程序的兩節佈局

見codepen：http://codepen.io/anon/pen/WwWZKe

<div class="col-md-8 pull-right" style="background-color: #263;height:120px;">Section 1</div> 
<div class="col-md-8 pull-right" style="background-color: #299;height:30px;">Section 2</div> 

<div class="col-md-3 pull-left" style="background-color: #999;height:50px;">Section 3</div> 
<div class="col-md-3 pull-left" style="background-color: #623;height:80px;">Section 4</div> 
<div class="col-md-8 pull-right" style="background-color: #222;height:80px;">Section 5</div>

理想我想這在兩列（第3,4上左，上1,2,5右）進行劃分。但我不想創建兩個超級列：

<div class="row"> 
    <div class="col-md-4">section3 , section 4</div> 
    <div class="col-md-8">section 1, section 2, section 5</div> 
</div>

因爲我想要這個訂單（section1-5）的移動。

編輯：

桌面所期待的順序是： 3-4（左部）和1-2-5（右部）移動1-2-3-4 -5 Div的高度不一，我期待着讓它們堆疊起來，沒有空間。

UPDATE

所以，我想另一種方法：

<div class="col-md-8 col-md-push-4"> 
    <div style="background-color: #263;height:120px;">Section 1</div> 
    <div class="" style="background-color: #299;height:30px;">Section 2</div> 
</div> 

<div class="col-md-4 col-md-pull-8"> 
    <div style="background-color: #999;height:50px;">Section 3</div> 
    <div class="" style="background-color: #623;height:280px;">Section 4</div> 
</div> 
<div class="col-md-8 col-md-push-4" style="background-color: #222;height:80px;">Section 5</div>

，我加入一個一起去塊，但我仍然有正確的部分間距的問題前節5

來源

2016-05-13 Ankit

好吧，工作： http://codepen.io/anon/pen/pymNRm

<div class="col-xs-12 col-md-8 pull-right"> 
    <div style="background-color: #263;height:120px;">Section 1</div> 
    <div class="" style="background-color: #299;height:30px;">Section 2</div> 
</div> 

<div class="col-xs-12 col-md-4 pull-left"> 
    <div style="background-color: #999;height:50px;">Section 3</div> 
    <div class="" style="background-color: #623;height:280px;">Section 4</div> 
</div> 
<div class="col-xs-12 col-md-8 pull-right" style="background-color: #222;height:80px;">Section 5</div>

我不得不說一起去塊結合，使用右拉式和拉左

來源

2016-05-17 01:24:58 Ankit

你會想要使用col-<size>-<n>類的多個實例。移動版xs，桌面版md或lg。如果你打算要求1-3-5和2-4，但是這就是我所做的。如果div全部具有相同的高度，此解決方案才能正常工作。希望這可以幫助。

http://codepen.io/anon/pen/qZwPGo

來源

2016-05-13 23:15:12

我很抱歉這不是我要找的。我熟悉不同的屏幕尺寸，順序和高度很重要（更新我的問題）。 – Ankit

你需要調查推/拉方法，但不是你擁有了它已經的方式 - 調查的語法如下：

如：「COL-MD-推3」或「 COL-SM-拉-6" ; etc

這將讓你移動divs到不同的視口不同的順序。只是使用拉右將應用浮動：右對每個div - 不是你在

後的效果推類會將div移到右邊，而拉類會將div移到左邊。因此，您可以在更寬的視口中將屏幕左側的div設置在小視口的左側，並以移動設備上的所需順序堆疊（-xs尺寸）

來源

2016-05-13 23:42:19 gavgrif

謝謝我試過這種方法（請參閱我對上述問題的更新）。但是間距仍未解決。 – Ankit

帶引導程序的兩節佈局

回答

相關問題