製作DIV表格單元格響應和rearanaged

Question

我試圖讓這個網站的設計響應。我希望它能夠在移動視圖中顯示出來時，這些單元格會相互重疊。最重要的是我希望box5成爲最上面的盒子。

我已經建立了這個媒體查詢....的問題是，它似乎改變我的箱子的位置被觸發查詢之前（這似乎恢復回原來的方式，他們是查詢時觸發..（這是我想要的正好相反）......此外，當它崩潰入大量的行，它並不適用高度和它們太小了。

@media (min-width: 768px) { 

    html,body,.main { height: 100%; } 
    div { 
    position: absolute; 
    } 
    .box1, 
    .box2, 
    .box5 { 
    top: 0; 
    bottom: 66.6666%; 
    } 
    .box3, 
    .box4, 
    .box6 { 
    top: 33.3333%; 
    bottom: 33.3333%; 
    } 
    .box7, 
    .box8, 
    .box9 { 
    top: 66.6666%; 
    bottom: 0; 
    } 
    .box5, 
    .box3, 
    .box7 { 
    left: 0; 
    right: 66.6666% 
    } 
    .box1, 
    .box6, 
    .box9{ 
    right: 0; 
    left: 66.6666% 
    } 
    .box2, 
    .box4, 
    .box8 { 
    left: 33.3333%; 
    right: 33.3333%; 
    } 
     .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9 { 
     height:150px; 
    } 
} 

這裏是我的codepen，以便您瞭解正在發生什麼... http://codepen.io/pisoj1/pen/BQWyRr

Answer 1

更新：

片段更新

現在我明白你想要做什麼。您可以通過添加重複box5元素，並將其設置爲display:none，然後更改顯示屬性在@media Rule

任何屏幕比600px的小寬會顯示box5頂部做到這一點。 您可以將其更改爲目標屏幕。

這是除非你必須這樣做的許多頁面上併爲許多元素，那麼你可能想看看一些超越css

---

老回答

這過於簡化佈局你不會需要@Media queries

然而，我認爲它產生所需效果。

裹你在一個容器<div>

打開全屏片斷小箱子然後調整窗口大小看到箱子怎麼堆。

.container: { 
 
    margin: 2% auto; 
 
} 
 
.box { 
 
    margin: 3%; 
 
    width: 200px; 
 
    height: 200px; 
 
    display: inline-block 
 
} 
 

 

 
/* ------------------------------- Start Effect CSS --------------------------------------- */ 
 

 

 
#b5a { 
 
    /* I add a duplicate element that is set to display:none by defualt. it will only show up if the screen is smaller that "x" value. */ 
 
    display: none 
 
} 
 
@media (max-width: 600px) { 
 
    /* Here you can Change resolution below which box5 will be on top - "x" value */ 
 
    #b5a { 
 
    display: inline-block 
 
    } 
 
    #b5b { 
 
    display: none 
 
    } 
 
} 
 

 
/* ------------------------------- End Effect CSS --------------------------------------- */ 
 

 

 
/* ------------------------------ Start misc CSS selectors ------------------------------ */ 
 

 
body { 
 
    background: #131418; 
 
    color: #999; 
 
    text-shadow: 2px 2px 10px #000; 
 
    text-align: center; 
 
    font-size: 2em 
 
} 
 
#b1 { 
 
    background: red 
 
} 
 
#b2 { 
 
    background: blue 
 
} 
 
#b3 { 
 
    background: green 
 
} 
 
#b4 { 
 
    background: yellow 
 
} 
 
#b5a, 
 
#b5b { 
 
    background: orange 
 
} 
 
#b6 { 
 
    background: teal 
 
} 
 
#b7 { 
 
    background: cyan 
 
} 
 
#b8 { 
 
    background: purple 
 
} 
 
.visual { 
 
    border: 1px solid #444; 
 
    box-shadow: inset 0px 0px 200px 50px rgba(0, 0, 0, .7) 
 
} 
 
/* ------------------------------ End misc CSS selectors ------------------------------ */

<div class="container"> 
 
    <div class="box visual" id="b5a">5</div> 
 
    <div class="box visual" id="b1">1</div> 
 
    <div class="box visual" id="b2">2</div> 
 
    <div class="box visual" id="b3">3</div> 
 
    <div class="box visual" id="b4">4</div> 
 
    <div class="box visual" id="b5b">5</div> 
 
    <div class="box visual" id="b6">6</div> 
 
    <div class="box visual" id="b7">7</div> 
 
    <div class="box visual" id="b8">8</div> 
 
</div>

Answer 2

我設法解決這個問題。我瞭解到，我將移動視圖設置爲默認視圖，然後當視圖寬度超過768像素時，我轉到桌面視圖並更改位置。所以我做了我的BOX1商店我的中間圖像（了Box5），所以這是一個容易掉。至於身高問題，我做了改變我的箱子高度時，寬度是769px一個MAX。

@media(min-width:768px){ 
    html,body,main{ 
    height: 100%; 
    } 
    div{ 
    position: absolute; 
    } 
    .box5, 
    .box2, 
    .box3{ 
    top:0; 
    bottom:66.6666% 
    } 
    .box4, 
    .box1, 
    .box6{ 
    top:33.3333%; 
    bottom:33.3333%; 
    } 
    .box7, 
    .box8, 
    .box9{ 
    top:66.6666%; 
    bottom:0; 
    } 
    .box2, 
    .box4, 
    .box7{ 
    left:0; 
    right:66.6666% 
    } 
    .box3, 
    .box6, 
    .box9{ 
    right:0; 
    left:66.6666% 
    } 
    .box5, 
    .box1, 
    .box8{ 
    left:33.3333%; 
    right:33.3333%; 
    } 

} 
@media(max-width:768px){ 
     .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9 { 
     height:150px; 
    } 

}