css - css を使用してこのレイアウトを実現する

Question

一部のアイテムのレイアウトを並べ替える必要があるメディアクエリの後に奇妙なレイアウトが変更されたレスポンシブデザインサイトがあります: 基本的に、a、b、c、d の 4 つのセクションがあるため、A は左の列 B は右ですcolumn および c と d は、その下の独自の行です (* は新しい行を意味します)。B * C * D 次に、この順序で 4 つの個別の行に並べ替える必要があります * A * C * B * D Javascript jQuery を使用して並べ替えることができますが、今はそれに依存したいので、探していますすべての CSS ソリューション、PHP ソリューション、そして最終的にすべてが可能でない場合は Javascript/jQuery ソリューション。

Answer 1

どうぞ

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;
    }
}
​