更改div在頁面大小更改上的位置

我想使用像這樣的引導來創建div組。更改div在頁面大小更改上的位置

------------------------------- 
|        | 
| |first div | | main | | 
|     | div | | 
| |second div| |  | | 
|        | 
-------------------------------

讓小屏幕也將在看起來像：

------------------ 
|     |    
| |first div | | 
|     |  
| | main | |  
| | div | | 
| |   | | 
|     | 
| |second div| | 
|     | 
------------------

這可能嗎？
如果是的話請指導我。

來源

2016-10-05 Conor

化妝用的'@ media'查詢： http://www.w3schools.com/css/css_rwd_mediaqueries.asp – Sankar

嘗試使用這樣的：

.col { 
 
    float: left; 
 
    margin: 20px; 
 
    padding-bottom: 100px; 
 
    margin-bottom: -100px; 
 
} 
 
.div-1{ 
 
    background: #ccc; 
 
} 
 
.div-2{ 
 
    background: #ddd; 
 
} 
 
.div-3{ 
 
    background: #eee; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-3 col-xs-12 div-1 col">First Div</div> 
 
    <div class="col-md-8 col-xs-12 div-2 col">Main Div</div> 
 
    <div class="col-md-3 col-xs-12 div-3 col">Second Div</div> 
 
    </div> 
 
</div>

Check here for demo

來源

2016-10-05 06:31:41

看看它是否有幫助 –

-1

通過嚴格的位置順序，您需要使用POSITION：ABSOLUTE並定義TOP LEFT WIDTH HEIGHT屬性。然後在CSS媒體查詢中，根據您的需要重新定位「最左側寬度高度」。

來源

2016-10-05 05:42:56

我如何創建第一個？我需要兩個'.col-md-3'向下。 – Conor

正如我的理解如果你想改變這樣的方向，這是可能的，但JavaScript有點棘手。

所以如果我把它翻譯成Bootstrap，它看起來是這樣的。

------------------------------- 
|        | 
| |first div | | main | | 
|     | div | | 
| |second div| |  | | 
|        | 
------------------------------- 

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-8 col-xs-12"> 
      <div class="row"> 
       <div class="col-xs-12"> 
        first div 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-xs-12"> 
        second div 
       </div> 
      </div> 
     </div> 
     <div class="col-lg-4 col-xs-12"> 
      main div 
     </div> 
    </div> 
</div>

然後在移動它看起來像。

------------------ 
|     |    
| |first div | | 
|     | 
| |second div| | 
|     | 
| | main | |  
| | div | | 
| |   | | 
|     | 
|     | 
|     | 
------------------

引導還提供col-pull和col-push，但它僅適用於該項目在同一行中所以這不會是這樣，除非通過某種方式的第一個div與主要的div相同的高度，我們可以將這兩個組合成一排。

讓我找到合適的解決方案，並很快回來:)

來源

2016-10-05 06:14:30 Sasuke91

更改div在頁面大小更改上的位置

回答

相關問題