使 div 表单元格响应和重新调整

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;
}
}

这是我的代码笔，所以你可以了解发生了什么......http://codepen.io/pisoj1/pen/BQWyRr

Answer 1

更新：

代码段已更新

现在我明白你想做什么了。为此，可以添加重复的box5元素并将其设置为display:none，然后在@media Rule中更改显示属性

任何小于 600 像素宽的屏幕都会在顶部显示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

我设法解决了它。我明白这一点，我将移动视图设置为默认视图，然后当它超过 768px 宽时，我转到桌面视图并更改位置。所以我让我的 box1 存储我的中间图像 (box5)，所以这是一个轻松的交换......至于高度问题，当宽度最大为 769px 时，我让它更改了盒子的高度。

@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;
}
}