jquery - 垂直レイアウトでは中央に DIV、水平レイアウトでは左側に div

Question

フロート要素でうまく動作しません...これが私がやろうとしていることです:

画面が「狭い」場合（縦向きのモバイルのように）、このレイアウトには3つのdivがあります

BB
AA
AA
CC

しかし、これは不可能なことです。ウィンドウが広い場合（デスクトップブラウザやランドスケープモバイルなど）、次のようにレイアウトする必要があります。

AABB
AACC

これはCSSだけで可能ですか、それともjqueryなどを使用する必要がありますか?

これは私を夢中にさせています。:p

ありがとう ！

Answer 1

要素をフロートするだけであれば、多かれ少なかれ自動的に機能するはずであり、@mediaクエリはあなたの側にあります。ただし、任意の幅で奇数要素 (ゼロから数えて) を分割したい場合、それも問題ではありません。

div:nth-child(odd) {
    clear: both;
}

すべての要素を垂直に積み重ねるほど画面が小さい場合、これは効果がないことに注意してください。

http://jsfiddle.net/ExplosionPIlls/bBEE5/