在一行內響應地重排列

如何在一行內響應地重排列？我有一個頁面網站有5個部分，他們每個人都有100％的寬度和高度的屏幕尺寸。在一行內響應地重排列

我在桌面上的我的第一部分（A和C包含圖像作爲background-image，B是DIV與h1元素）：

---------------------------------------- 
|   |     |   | 
|   |     |   | 
| A  |  B   |  C | 
| col-lg-3 |  col-lg-6  | col-lg-3 | 
|   |     |   | 
|   |     |   | 
----------------------------------------

我想對小屏幕（智能手機）：

------------- 
|    | 
|  B  | 
|    | 
------------- 
|  |  | 
|  |  | 
| A | C | 
|  |  | 
|  |  | 
-------------

我試圖用引導的push和pull類，但他們打斷了我的一個頁面佈局，我想保持A，B和C的一個內全屏部分。任何幫助讚賞:)非常感謝！

編輯：

下面是我的一些HTML的：

<div class="row section first"> 
    <div class="col-sm-12 col-lg-6" id="B"><h1>Header</h1></div> 
    <div class="col-sm-6 col-lg-3 col-lg-pull-6" id="A"></div> 
    <div class="col-sm-6 col-lg-3" id="C"></div> 
</div> 

<div class="row section second"> 
    <div>second section content...</div> 
</div>

...和我的CSS代碼片段：

body { 
    width: 100vw; 
} 

.section { 
    height: 100vh; 
} 

#B h1 { 
    font-family : 'Lobster', Impact; 
    font-weight : 400; 
    font-size  : 8vw; 
    letter-spacing: -4px; 
    position  : relative; 
    top   : 30%; 
    color   : #66678B; 
    margin-top : 300px; 
    text-shadow : 5px 5px rgb(226, 226, 233); 
} 

div#A { 
    background   : url('./img/A.png') no-repeat; 
    background-size : contain; 
    background-position: bottom center; 
    height    : 100%; 
    margin-top   : 25px; 
    margin-right  : -75px; 
    padding-top  : 5px; 
} 

div#C { 
    background   : url('./img/C.png') no-repeat; 
    background-size : contain; 
    background-position: bottom center; 
    height    : 100%; 
    margin-top   : 25px; 
    margin-left  : -75px; 
    padding-top  : 5px; 
}

來源

2015-07-03 kjuri

要設計此佈局，您可以嘗試使用移動優先方法。也就是說，首先在小屏幕上設計佈局，然後在「拉」和「推」類的幫助下進行更大的佈局。

在這種情況下，第一，第二佈局：

<div class="row"> 
    <div class="col-sm-12"> B </div> 
    <div class="col-sm-6"> A </div> 
    <div class="col-sm-6"> C </div> 
</div>

然後對其進行修改，以適應第一個佈局：

<div class="row"> 
    <div class="col-sm-12 col-lg-6"> B </div> 
    <div class="col-sm-6 col-lg-3 col-lg-pull-6"> A </div> 
    <div class="col-sm-6 col-lg-3"> C </div> 
</div>

來源

2015-07-04 02:56:04

謝謝您的答覆，但我的佈局仍然是打破時，我調整瀏覽器窗口大小。我的意思是，當窗口寬度很小時，B和A元素應該是他們應該在的位置，但是C元素會下到下一部分 - 正如我所提到的，A和C是以圖像爲背景的div，並且這些圖像應該緊挨着每個其他。我編輯了我的問題並提供了一些代碼片段。 – kjuri

我注意到你的css中指定了div的高度和寬度，這可能會破壞bootstrap網格功能。我建議你先刪除它們，看看佈局是否可以工作，然後使用瀏覽器的調試器調整邊距或填充。這裏是一個工作小提琴：https：// jsfiddle。net/tooWhite/k8pfLwap/7/embedded/result/ –

最後，我將CSS和CSS媒體查詢混合引導網格，並實現了我想要的:)非常感謝您的幫助:) – kjuri

flexbox能做到這一點

* { 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    width: 50%; 
 
    margin: 10px auto; 
 
    border: 1px solid red; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    text-align: center; 
 
} 
 
.a, 
 
.b, 
 
.c { 
 
    height: 50px; 
 
    border: 1px solid grey; 
 
    order: 1; 
 
    line-height: 50px; 
 
} 
 
.b { 
 
    flex-grow: 2; 
 
    /* twice as wide */ 
 
    flex-basis: 100%; 
 
    background: lightblue; 
 
    order: 0; 
 
    /* move the element to first in line */ 
 
} 
 
.a, 
 
.c { 
 
    flex-basis: 50%; 
 
    background: red; 
 
    flex-grow: 0; 
 
} 
 
.c { 
 
    background: lightgreen; 
 
} 
 
@media screen and (min-width: 600px) { 
 
    .container { 
 
    flex-direction: row; 
 
    flex-flow: nowrap; 
 
    } 
 
    .a, 
 
    .b, 
 
    .c { 
 
    flex: 1; 
 
    flex-grow: 1; 
 
    order: 1; 
 
    } 
 
}

<div class="container"> 
 
    <div class="a">A</div> 
 
    <div class="b">B</div> 
 
    <div class="c">C</div> 
 
</div>

JSfiddle Demo

來源

2015-07-03 23:19:37

<div class="container"> 
    <div class="row"> 
    <div class="b col-sm-12 col-lg-6 col-lg-push-3">B</div> 
    <div class="a col-sm-6 col-lg-3 col-lg-pull-6">A</div> 
    <div class="c col-sm-6 col-lg-3">C</div> 
    </div> 
</div>

fiddle。

a，b和c的div類中是不必要的，只用於演示目的使用。

來源

2015-07-04 02:36:29

在一行內響應地重排列

回答

相關問題