定位的div使用CSS

Question

我就響應佈局不同的屏幕尺寸工作，並有如下一個HTML結構：如下

<div id="top"> 
    some text 1 
</div> 
<div id="middle"> 
    some text 2 
</div> 
<div id="bottom"> 
    some text 3 
</div> 

和CSS：

/*Responsive Layout Style Start */ 
/*STRUCTURE*/ 

#top { 
    width: 220px; 
    float: left; 
    padding: 5px 8px 5px 8px; 
    margin-left: 8px; 
    background: #EFF5F8; 
} 

#middle { 
    width: 452px; 
    float: left; 
    padding: 5px 8px; 
    margin: 0px 5px 5px 5px; 
} 

#bottom { 
    width: 220px; 
    padding: 5px 5px; 
    float: left; 
     background: #EFF5F8; 
} 

/*MEDIA QUERIES*/ 
/* for 980px or less */ 
@media screen and (max-width: 980px) { 
    #top { 
     width: 40%; 

    } 
    #middle { 
     width: 55%; 
     padding: 5px 5px; 
     float: right; 
    } 

    #bottom { 
     clear: both; 
     padding: 1% 2%; 
     width: auto; 
     float: none; 
    } 
} 

/* for 900px or less */ 
@media screen and (max-width: 900px) { 
    #content { 
     width: 39%; 
    } 
    #middle { 
     width: 55%; 
     padding: 5px 5px; 
     float: right; 
    } 

    #bottom { 
     clear: both; 
     width: auto; 
     float: none; 
    } 
} 

/* for 800px or less */ 
@media screen and (max-width: 800px) { 
    #top { 
     width: 33%; 
    } 
    #middle { 
     width: 59%; 
     padding: 5px 5px; 
     float: right; 
    } 

    #bottom { 
     clear: both; 
     width: auto; 
     float: none; 
    } 

} 

/* for 600px or less */ 
@media screen and (max-width: 600px) { 
    #top { 
     width: auto; 
     float: none; 
    } 

    #middle { 
     width: auto; 
     padding: 5px 10px; 
     float: right; 
     margin: 0px 5px 5px 5px; 
    } 

    #bottom { 
     width: auto; 
     float: none; 
    }   
} 

/* for 480px or less */ 
@media screen and (max-width: 480px) { 

    h1 { 
     font-size: 24px; 
    } 
} 

/* border & guideline */ 
#top { 
    background: #f8f8f8; 
} 
#bottom { 
    background: #f0efef; 
} 

img { 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* ie8 */ 
} 
/*Responsive Layout Style End */ 

爲600像素或更低。我想讓「中間」部分顯示在頂部，然後是部分「頂部」和「底部」

我試過谷歌的各種選項都沒有幫助。

任何想法都會有很大的幫助。

Answer 1

你可以把隱藏div這將是displayed對請求的屏幕尺寸。

實施例 -

HTML

<div id="middle_hidden"> 
    some text 2 
</div> 
<div id="top"> 
    some text 1 
</div> 
<div id="middle"> 
    some text 2 
</div> 
<div id="bottom"> 
    some text 3 
</div> 

CSS

.... 

#middle_hidden { 
    display:none; 
} 

.... 

@media screen and (max-width: 600px) { 

    .... 

    #middle { 
     .... 
     display:none; 
    } 

    #middle_hidden { 
     display:block; 
    } 

} 

JSFiddle。