Change Div order on Responsive Design
I am creating a responsive design website.
Basically when the view port is lower than XI want to show the menu at the foot of the page.
EXAMPLE LINK DEAD - SITE NO LONGER OWNED BY ME
IF you resize your browser window, you will notice 3 different designs (Based on end goal design rather than device types)
V1: greater than 999px, You will see Red box top left, blue box next to red box.
V2: between 600px and 999px, You will notice red box gets smaller, blue box now sits under red box
v3: Less than 600px, You will notice again red box gets smaller, blue box now yellow.
Basically, in V3, I want to make the now yellow box, sit under the green box, above the grey box
so the order goes Red Box Green Box Yellow box Grey Box
Other than the nasty hide old div, show new div hack (technique) or JS version (goes away from CSS Responsive) Is there a way to move this.
CSS is within the file, so view source shows everything.
Cheers
I honestly can't think of a way to do this in CSS alone, but it is easily doable in jQuery without breaking your responsive design. Your CSS doesn't need to change except to remove the margin-top from the #top-links div.
<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>
I have just implemented a solution from
http://www.jtudsbury.com/thoughts/rearrange-div-order.php
that uses display: table-header-group;
and display: table-footer-group;
Here is my example for two horizontal 50% width boxes that switch to right above left box on shrinking window width:
.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;
}
}
Try this Maybe Helpful
@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/88032.html上一篇: 表更改div大小
下一篇: 在响应式设计上更改Div订单