미디어 쿼리

Question

사진의 페이지의 다른 부분에 제쳐두고을 떠하는 방법 다음 :

위에

네비게이션 바 (왼쪽 및 오른쪽) 페이지의 각 측면에 사이드 바 및 샌드위치 콘텐츠 사업부를 그 곁에서. 데스크톱에서는 모든 것이 멋지게 보입니다.

모바일보기의 단일 열 레이아웃에 대한 미디어 쿼리를 입력하십시오. 이제 레이아웃은 Nav, 왼쪽 사이드 바, 그 아래의 내용 및 오른쪽 아래의 사이드 바입니다.

내 질문은 마크 업을 만지지 만 CSS를 변경하지 않고, 모바일 미디어 쿼리의 왼쪽 사이드 바 아래에있는 오른쪽 사이드를 얻을 수 있지만, 바탕 화면 뷰는 그대로두고 방법이다. 여기에 내가 무슨 뜻인지 보여줄 수있는 바이올린에 대한 링크는 다음과 같습니다 바탕 화면 레이아웃

Fiddle

모든 것은

@media only screen and (min-width: 768px) { } 

CSS 블록의 내부입니다. 내가 당신을 알고

Answer 1

는 "만 CSS 변경"을 요청했습니다. 그래서 무엇보다 먼저 새로운 CSS order 기능을 갖춘 솔루션이있을 수 있습니다. 그런 다음 마크 업을 조금만 변경하면 훨씬 간단한 방법을 사용하지 않는 것이 좋습니다 (DEMO).

다음 예제에서는 피들에서 솔루션을 보여줄 필요가없는 모든 코드를 제거했습니다.

당신은 내용 요소 전에 오른쪽 사이드를 이동할 수 있고 마우스 오른쪽 바탕 화면 모드/왼쪽을 떠. 3 개 요소가 다시 원래 "마크 업 위치"를 얻을 수 있도록

.sidebar { 
    width: 20%; 
} 

.content { 
    width: 60%; 
    float: left; 
} 

.sidebar_right { 
    float: right; 
} 

.sidebar_left { 
    float: left; 
} 

모바일 모드에서는 플로트를 제거합니다.

@media only screen and (max-width: 768px) {  
    .sidebar, .content { 
     float: none; 
     width: 100%; 
    } 
}