divs를 적절하게 스태킹합니다.

Question

데스크톱/대형 화면에서 다음 레이아웃을 사용하는 반응 형 사이트에서 작업하고 있습니다. 이 전화/작은 화면에 때

1. 헤더
2. 메뉴
3. 내용

그 다음이 될 것입니다

1. 헤더
2. 내용
3. 메뉴

어떻게 할 수 있습니까? 필자가 본 모든 예제는 절대 위치 지정을 사용하는 것처럼 보이지만 동적으로 화면 크기와 크기에 맞게 동적으로 지정하고 싶습니다.

감사합니다.

Answer 1

CSS3 flexboxbox-direction: reverse; 속성을 사용할 수 있습니다. 다음과 같이 쓰기 :

.flex{ 
    display: -moz-box; 
    -moz-box-orient:vertical; 
    -webkit-box-orient:vertical; 
    display: -webkit-box; 
    box-orient:vertical; 
    display:box; 
    width:100%; 
} 
.flex div, .header{ 
    border:1px solid red; 
    height:100px;  
} 


@media screen and (max-width : 400px){ 
    .flex{ 
    -moz-box-direction: reverse; 
    -webkit-box-direction: reverse; 
    box-direction: reverse; 
} 
} 

확인 그것은 시각적 표현에 따라이 http://jsfiddle.net/Hj5pz/

Answer 2

CSS는 HTML 요소의 순서를 재정렬 할 수 없으므로이 경우 절대 위치 지정이 사용되었습니다.

또는 한 형식으로 표시되고 다른 형식으로 표시되지 않는 섹션의 숨겨진 복제본이 필요할 수 있습니다. 반대의 경우도 마찬가지입니다.