在页面大小更改时更改 div 位置答案

【问题标题】：Change div Position on page size change在页面大小更改时更改 div 位置
【发布时间】：2016-10-05 14:50:27
【问题描述】：

我想像这样使用引导程序创建一个 div 组。

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

所以在较小的屏幕上它看起来像：

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

有可能吗？
如果是，请指导我。

【问题讨论】：

利用@media查询：w3schools.com/css/css_rwd_mediaqueries.asp

标签： html css twitter-bootstrap

【解决方案1】：

试试这个：

.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

【讨论】：

看看有没有用

【解决方案2】：

据我了解，如果您想像这样改变方向，可以使用 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    |   |
|   |          |   |
|                  |
|                  |  
|                  |
 ------------------

Bootstrap 还提供 col-pull 和 col-push 但它仅适用于同一行中的项目，因此除非第一个 div 以某种方式与主 div 具有相同的高度并且我们可以将这两个组合成一行。

让我找到合适的解决方案并尽快回来:)

【讨论】：

【解决方案3】：

使用严格的仓位顺序，您需要使用 POSITION: ABSOLUTE 并定义 TOP LEFT WIDTH HEIGHT 属性。然后在 CSS 媒体查询中，根据您的需要重新定位 TOP LEFT WIDTH HEIGHT。

【讨论】：

如何创建第一个？我需要两个.col-md-3 向下。