0
DOMの初期順序を維持しながら、画面サイズに基づいて要素の位置と表示順序を異ならせるブラウザ間のやり方を探しています。要素は最初は別のコンテナに入れられており、メディアクエリのfloat/clearのような標準的な方法では十分ではないでしょう。画面サイズに基づいて異なるコンテナの要素を並べ替える
また、純粋なCSSソリューションであればいいですね。
このフィドルは、望ましくないロードおよびサイズ変更イベントでDOMを操作するためにjavascriptを使用しています。
https://jsfiddle.net/168y076w/
HTML：
<body>
<div id="header">HEADER</div>
<div id="left_column">
<div id="left_box_1">LEFT BOX 1</div>
<div id="left_box_2">LEFT BOX 2</div>
</div>
<div id="main_content_holder_for_big_devices"></div>
<div id="right_column">
<div id="right_box_1">RIGHT BOX 1</div>
<div id="main_content_holder_for_small_devices">
<div id="mid_column">MID COLUMN</div>
</div>
<div id="right_box_2">RIGHT BOX 2</div>
</div>
</body>
CSS：
#header {
width: 100%;
height: 80px;
background: red;
}
#mid_column {
background: aqua;
height: 60px;
}
#left_box_1, #left_box_2 {
background: blue;
height: 40px;
}
#right_box_1 {
background: yellow;
height: 40px;
}
#right_box_2 {
background: purple;
height: 40px;
}
@media screen and (min-width: 600px) {
body {
width: 600px;
}
#left_column, #mid_column, #right_column {
float: left;
}
#left_box_1, #left_box_2, #right_box_1, #right_box_2 {
width: 150px;
}
#mid_column {
width:300px;
background: aqua;
}
}
Javascriptを：
const SMALL_DEVICE_WIDTH = 600;
var $holder_for_small = $("#main_content_holder_for_small_devices");
var $holder_for_big = $("#main_content_holder_for_big_devices");
window.addEventListener("resize", move_content_in_dom);
window.addEventListener("load", move_content_in_dom);
function move_content_in_dom() {
var w = window.innerWidth;
if(w < SMALL_DEVICE_WIDTH) {
if($holder_for_big.html() !== "") {
$holder_for_small.html($holder_for_big.html());
$holder_for_big.html("");
}
} else {
if($holder_for_small.html() !== "") {
$holder_for_big.html($holder_for_small.html());
$holder_for_small.html("");
}
}
}
この画像は私が達成したいレイアウトを示しています。携帯電話のような小さなデバイスでは、上のヘッダーの後に、私は左の列からボックスを持っています。右の列から1つのボックスを、その後にメインのコンテンツを、その後に右の列の別のボックス
私は車輪の再発明する必要はありませんので、私に適切なツールを与えるだろう答えを期待しています。
実際、私は絶対位置付けと浮動を使ってやったと思います。 Windows上でChrome、Firefox、Opera、Vivaldi、IE 11で正常にテストされました。 Linux上のChromiumとFirefox; AndroidのChromeとAndroidブラウザメディアクエリがサポートされていないためIE8で失敗しました。IEの<9の大画面のスタイルを強制する条件付きコメントにスタイルを追加しました。 http://codepen.io/anon/pen/vGbYeK?editors=0100 – Lukas
クール、良い仕事！あなたの質問は「画面サイズに基づいて異なるコンテナ内の要素を並べ替える」ということに注意してください。ソリューションでは、それらを同じコンテナ（「right_column」）に配置するだけで、追加を開始するときコンテンツ。しかし、幸運！ –
真。質問はもともと「サイド・コラムの行間のメイン・コンテンツ（小型デバイスのみ）」と呼ばれていました。彼らは私にペイパル・アドレスを送信するかどうかを尋ねるように私を楽しませてくれました。曖昧さを減らす。 – Lukas