2 番目と 4 番目のボックスを右に引き出すには、CSS メディア クエリを使用する必要があります。ブラウザーの幅が広がると、ボックス 2 と 4 は右に移動する必要があり、ボックス 2 はボックス 1 の下で平らなままにする必要があります。ボックスの順序が必要です。
私が思いついた解決策は近いですが、ボックス 2 のテキストが長すぎると、ボックス 3 が押し下げられます。ボックス 3 がボックス 1 の下で平らなままであることが重要です。
JsFiddle の例を次に示します: http://jsfiddle.net/FJswg/
<html>
<style>
body {
margin:0;
padding:0;
}
div {
padding:10px;
}
#box1 {
color:#fff;
background-color:#00f;
}
#box2 {
background-color:#0f0;
}
#box3 {
background-color:#f00;
}
#box4 {
color:#fff;
background-color:#000;
}
@media screen and (min-width: 500px) {
#box1 {
float:left;
clear:left;
width:150px;
}
#box2 {
margin-left:170px;
}
#box3 {
float:left;
clear:left;
width:150px;
}
#box4 {
margin-left:170px;
}
}
</style>
<body>
<div id="box1">Box 1</div>
<div id="box2">Box 2, Consectetur gentrify gluten-free fanny pack, bespoke enim ethical letterpress pitchfork ullamco pickled.</div>
<div id="box3">Box 3</div>
<div id="box4">Box 4, 8-bit mumblecore excepteur readymade single-origin coffee fingerstache mlkshk. Sint fanny pack raw denim quinoa. Ennui vero photo booth magna.</div>
</body>
</html>
アップデート
JavaScript を使用する必要がある場合、これが最もクリーンな方法ですか? http://jsfiddle.net/FJswg/8/
var size = 0;
$(window).resize(function() {
checkWidth();
});
$(document).ready(function() {
checkWidth();
});
function checkWidth() {
var newWidth = $(window).width();
var newSize = 0;
if (newWidth >= 500) {
newSize = 1;
}
if (newSize != size) {
size = newSize;
$moveElement = (size < 0) ? $("#box2") : $("#box3");
$("#box1").after($moveElement);
}
}?