我正在努力使这个网站设计响应。我想要它，以便当它进入移动视图时，单元格会崩溃到彼此之上。最重要的是，我希望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
答案 0 :(得分：0)
更新：
代码段已更新
现在我明白了你要做的事情。您可以通过添加重复的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>
答案 1 :(得分：0)
我设法解决了这个问题。我明白了，我将移动视图设为默认视图，然后当它超过768px宽时，我转到桌面视图并更改位置。所以我让我的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;
}
}