在响应式设计上更改Div订单
我正在创建一个响应式设计网站。
基本上当视口低于XI时，要在页面底部显示菜单。
示例链接死亡站点不再由我拥有
如果您调整浏览器窗口大小，您会注意到3种不同的设计（基于最终目标设计而非设备类型）
V1：大于999px，您会看到红色框左上方，红色框旁边是蓝色框。
V2：在600像素到999像素之间，您会注意到红色框变小，蓝色框现在位于红色框下
v3：小于600px，您会再次注意到红色框变小，蓝色框变为黄色。
基本上，在V3中，我想要制作现在的黄色方块，坐在绿色方块下，灰色方块上方
所以顺序去红框绿框黄框灰框
除了讨厌的隐藏旧的div，显示新的div黑客（技术）或JS版本（远离CSS响应）有没有办法来移动这个。
CSS在文件中，所以查看源显示一切。
干杯
老实说，我无法想象在CSS中只能这样做的方法，但在jQuery中很容易实现，而不会影响您的响应式设计。 除了从＃top-links div中删除margin-top外，您的CSS无需更改。
<script type="text/javascript">
$(document).load($(window).bind("resize", listenWidth));
function listenWidth( e ) {
if($(window).width()<600)
{
$("#topLinks").remove().insertAfter($("#content"));
} else {
$("#topLinks").remove().insertBefore($("#content"));
}
}
</script>
我刚刚实施了一个解决方案
http://www.jtudsbury.com/thoughts/rearrange-div-order.php
使用display: table-header-group; 并display: table-footer-group;
这里是我的两个水平50％宽度框的示例，它们在缩小窗口宽度的情况下切换到右上方的框。
.box-container {
display: table;
}
.box-50 {
width: 50%;
display: table-cell;
padding: 0 20px;
}
@media only screen and (max-width : 700px) {
.box-container {
display: block;
}
.box-50 {
display: block;
width: 100%;
}
/* http://www.jtudsbury.com/thoughts/rearrange-div-order.php */
.box-50.left {
display: table-footer-group;
}
.box-50.right {
display: table-header-group;
}
}
试试这可能有用
@media (min-width:1px) and (max-width:599px) {
#pageFrame {
width:100%;
}
#logo {
margin:0 auto;
width:50px;
height:50px;
}
#topLinks {
position:absolute;
top:250px;
float:right;
width:100%;
background-color:yellow;
}
#content {
position:absolute;
top:100px;
clear:none;
float:left;
width:100%;
}
#footer {
position:absolute;
top:350px;
clear:both;
width:100%;
}
DEMO
链接地址: http://www.djcxy.com/p/88031.html