css

レスポンシブ 上下を入れ替える

display プロパティーの table-row-group や table-header-group などの値を応用すれば、上下の入れ替えが可能です。説明だと分かりづらいので、demo をご参照ください。

<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mod-groupContainer{}
.mod-group1{}
.mod-group1-inner{
	padding:10px;
	background:#0CF;
}
.mod-group2{}
.mod-group2-inner{
	padding:10px;
	background:#F0C;
}
@media(max-width:600px){
.mod-groupContainer{
	display:table;
	width:100%;
}
.mod-group1{display:table-row-group;}
.mod-group1-inner{}
.mod-group2{display:table-header-group;}
.mod-group2-inner{}
}
</style>
</head>
<body>
<p>横幅 600px をしきい値として表示が変わります。</p>

<div class="mod-groupContainer">
	<div class="mod-group1"><div class="mod-group1-inner">
		<img src="img_01.jpg" alt="" width="320" height="240">コンテンツ1 コンテンツ1
	</div></div>
	<div class="mod-group2"><div class="mod-group2-inner">
		コンテンツ2 コンテンツ2 コンテンツ2
	</div></div>
</div>

</body>
</html>

横幅 600px をしきい値として表示が変わります。コンテンツ1 コンテンツ1 コンテンツ2 コンテンツ2 コンテンツ2

この方法は、対象デバイスによって、コンテンツのプライオリティーが変わる場合に有効でしょう。また、table-footer-group をさらに加えれば、上、中、下の 3つを自由に入れ替えることもできます。

なお、これをさらに使いやすくしたような仕組みの CSS Grid Layout モジュールが CSS3 として策定中で、IE10 では利用することができます。