3元素，這兩個權利應該移動到頂部，並在twitter-bootstrap buttom

我想建立一個測試網站。它包含3個div。一格應在左側，其他格在右側。如果我調整瀏覽器的大小，最高的div應該移動到頂部，最低的應該移動到底部。3元素，這兩個權利應該移動到頂部，並在twitter-bootstrap buttom

這是它應該如何看大瀏覽器：

<div class="col-lg-6 highlight" style="height:50%;">1</div> 
<div class="col-lg-6 highlight" style="height:25%;">2</div> 
<div class="col-lg-6 highlight" style="height:25%;">3</div>

但如果我調整瀏覽器，順序爲1 - 2 - 3。我要2 - 1 - 3

這應該是這樣。該代碼工作中移動：

<div class="col-lg-6 highlight col-lg-push-6" style="height:25%;">2</div> 
<div class="col-lg-6 highlight col-lg-pull-6" style="height:50%;">1</div> 
<div class="col-lg-6 highlight col-lg-push-6" style="height:25%;">3</div>

但如果我調整瀏覽器窗口到大，它產生間隙。

它的工作原理，如果我漂浮在1到左側和他人的權利和在大的瀏覽器中刪除的CSS屬性。但是，純粹的自舉有可能嗎？

來源

2016-08-03 Ef Ge

您可以像這樣向左或向右使用右拉和左拉類。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <style> 
 
    @media(max-width: 991px) { 
 
     .pull-right, 
 
     .pull-left { 
 
     float: none!important; 
 
     } 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="row" style="height:500px;"> 
 
    <div class="col-md-6 pull-right" style="height:25%;background:#080;color:#fff;text-align:center;">2</div> 
 
    <div class="col-md-6 pull-left" style="height:50%;background:#080;color:#fff;text-align:center;">1</div> 
 
    <div class="col-md-6 pull-right" style="height:25%;background:#080;color:#fff;text-align:center;">3</div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-08-03 10:29:29

3元素，這兩個權利應該移動到頂部，並在twitter-bootstrap buttom

回答

相關問題