화면 크기에 따라 HTML 콘텐츠 순서 변경

Question

화면 크기에 따라 HTML 콘텐츠의 순서를 변경하는 방법이 있는지 궁금합니다.

이것은 주요 웹 사이트 헤더이며 모든 미디어 쿼리에 올바르게 표시됩니다.

가

H1 텍스트
H2의 TEXT ----------------- 목록 항목

(또는 체크 아웃 :

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

Basicly 그것은 다음과 같다 (: 480 픽셀 만 화면 (최대 폭 @media) {}) 의 H2가 찌그러 도착하고, 나는 탐색을 넣어 원합니다 http://www.jeroenduijker.nl/test/과의 미디어 쿼리 단계가 자마자)

을 화면 크기를 조정 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 
    } 
}