レスポンシブ 上下を入れ替える
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>
この方法は、対象デバイスによって、コンテンツのプライオリティーが変わる場合に有効でしょう。また、table-footer-group をさらに加えれば、上、中、下の 3つを自由に入れ替えることもできます。
なお、これをさらに使いやすくしたような仕組みの CSS Grid Layout モジュールが CSS3 として策定中で、IE10 では利用することができます。