使用引導行和列的推拉在網頁上訂購內容

Question

我有一個關於引導程序的網格模型的問題。 我有一個包含三個div的行，這裏是我希望它在不同視圖中看起來的方式。

手機：

all divs with xs-col-12 
div2 on top 
div1 second 
div3 last 

片劑：

div1 col-sm-6 left (this is the main content) 
div2 col-sm-6 right top 
div3 col-sm-6 right bottom 

桌面：

div1 col-md-8 left (Still the main content) 
div2 col-md-4 right top 
div3 col-md-4 right bottom 

Div1構成爲主要含量的O在頁面中，div2和3是側面菜單。下面

代碼是據我得到了..

.div1{ 
 
\t background-color: red; 
 
\t height: 800px; 
 
} 
 
.div2{ 
 
\t background-color: blue; 
 
    height: 200px; 
 
} 
 
.div3{ 
 
\t height: 200px; 
 
\t background-color: yellow; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
\t \t 
 
\t <div class="div2 col-xs-12 col-sm-6 col-sm-push-6 col-md-4 col-md-push-8">div2</div> 
 
\t <div class="div1 col-xs-12 col-sm-6 col-sm-pull-6 col-md-8 col-md-pull-4">div1</div> 
 
\t <div class="div3 col-xs-12 col-sm-6 col-sm-push-6 col-md-4 col-md-push-8">div3</div>

Answer 1

爲了得到你想要不改變的標記，我相信你需要浮動的div 2和3右的順序，這將需要一個自定義媒體查詢。 （我從來沒有見過班自舉像col-md-right，col-sm-left，儘管你可以將它們添加。）

Fiddle

@media (min-width: 768px) { 
    div.div1{ 
     float: left; 
     right: 0; 
    } 
    div.div2 { 
     float: right; 
     left: 0; 
    } 
    div.div3 { 
     float: right; 
     left: 0; 
    } 
}