CSS를 사용하여이 레이아웃을 완성합니다

Question

일부 항목의 레이아웃을 재정렬해야하는 미디어 쿼리 후에 이상한 레이아웃이 변경되는 반응이 빠른 디자인 사이트가 있습니다. 기본적으로 4 섹션, a, b, c, d가 있습니다 따라서 A는 왼쪽 열이고 B는 오른쪽 열이고 c와 d는 자신의 아래 행입니다 (*는 새 행을 의미 함) * A | B * 는 나는 순서 4 개되는 중복 행을 다시 정렬 한 필요가 C * D *는 * C * B * D 나는 일의 순서를 자바 스크립트 jQuery를 사용할 수 있지만, 지금 의존하는 것을 선호 그것에, 그래서 나는 모든 CSS 솔루션, PHP 솔루션을 찾고 있는데, 마지막으로 가능한 모든 Javascript/jQuery 솔루션이 아니라면.

Answer 1

Here you go

HTML :

<div id="a"></div> 
<div id="b"></div> 
<div id="c"></div> 
<div id="d"></div>​ 

CSS

#a { background-color: #aaa; } 
#b { background-color: #bbb; } 
#c { background-color: #ccc; } 
#d { background-color: #ddd; } 

div { 
    height: 100px; 
    width: 100%; 
} 

@media 
    screen and (min-width: 420px) { 
    div { position: absolute; } 
    #a{ 
     width: 50%; 
    } 

    #b { 
     top: 100px; 
    } 

    #c { 
     left: 50%; 
     width: 50%; 
    } 

    #d { 
     top: 200px; 
    } 
} 
​