根據屏幕大小更改HTML內容順序

Question

我想知道是否有方法根據屏幕大小更改HTML內容的順序。

這是主要的網站標題，它顯示正確的每個媒體查詢。

<h1>title</h1> 
<nav>inline list items</nav> 
<h2>subtitle</h2> 

Basicly它看起來像這樣：

H1 TEXT
H2 TEXT -----------------列表項

（或退房http://www.jeroenduijker.nl/test/並調整屏幕大小）

只要媒體查詢進入（@media僅屏幕和（最大寬度：480px）{}） ，h2就會被擠壓，而且我更願意將導航在h1以上的酒吧。

有一個簡單的方法，使HTML去：

-----------------列表項
H1 TEXT
H2 TEXT

希望我已經解釋得很好，我希望你能幫助我，我會很感激！

Answer 1

您可以編寫兩個導航欄，一個隱藏，另一個可見，然後根據媒體查詢切換。

HTML：

<nav class="show-mobile"> 
     ... 
</nav> 

<h1>title</h1> 
<nav class="hide-mobile"> 
     ... 
</nav> 
<h2>subtitle</h2> 

CSS：

@media only screen and (max-device-width: 480px) { 
     .show-mobile { 
     display: block; 
     } 
     .hide-mobile { 
     display: none; 
     } 
    } 

@media only screen and (min-device-width: 481px) { 
     .show-mobile { 
     display: none; 
     } 
     .hide-mobile { 
     display: block; 
     } 
    } 

兩個H1元素，一個在導航之前，一次次，讓他們基於交換機的媒體查詢的知名度。

<h1 class="hide-mobile"></h1> 
<nav> 
    ... 
    ... 
</nav> 
<h1 class="show-mobile">Title</h1> 
<h2>subtitle</h2> 

或者，當移動媒體查詢處於活動狀態時，您可以讓導航具有絕對定位。

@media only screen and (max-device-width: 480px) { 
    nav { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 44px 
    } 
}