私は以下のHTML形式を持っています。デスクトップ上の特定の要素を配置する効率的な方法（幅は< 640ピクセル）？さまざまなデバイスがあるため、ページの高さの内容が異なるため、位置座標を書きたくないです。助言がありますか？レスポンシブなデザインの上から下にある要素を移動する最良の方法
<html>
<head>
..
</head>
<body>
..
<p>I am on the top of desktop page, and bottom of mobile page</p>
...
</body>
</html>
高さが不明な要素を並べ替える方法は、Flexboxで行うのが最適です。デスクトップブラウザ（IEはここでの主な制限要因であり、サポートはv10で始まります）ではサポートは素晴らしいですが、ほとんどのモバイルブラウザはをサポートしています。
http://cssdeck.com/labs/81csjw7x
@media (max-width: 30em) {
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
/* optional */
-webkit-box-align: start;
-moz-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.container .first {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
}
http://caniuse.com/#feat=flexbox
フレキシボックスは、典型的なグリッド技術のような他のレイアウト方法と衝突することができることに注意してください。浮動するように設定されたフレックスアイテムは、2009仕様（display: -webkit-box）を使用してWebkitブラウザで予期しない結果を引き起こす可能性があります。フレキシボックスより
それが最善の方法かどうかは分かりませんが、あなたがそれをしたいと同じ要素を複製し、display: none/display: inline-block属性で遊ぶことができます。それはデスクトップ上で表示されているとき、あなたのCSSは、それが一番上に表示され、一番下に表示されないように指示します。次に、モバイルで見た場合、上部に表示され、下部に表示されるべきではありません。
私が言ったように、私はこれが最も効果的な方法だとは思っていませんが、うまくいきます。他の誰かがより良い解決策を持っているなら、私はそれを聞いてみたいです。
私は、あなたがスクロールするときに動かないように「位置」を意味すると仮定します。あなたが使用することができ、その場合には：
p要素は、このようなクラス属性を取得しますp.className {
position: fixed;
bottom: 0; // for mobile devices
top: 0; // for desktops
}
：
<p class="className">I am on the...</p>
下&トップは、あなたが基づいて関連1をロードする必要があります同時に存在しませんデバイス上にあります。デスクトップの場合は、divの高さでコンテンツをオフセットする必要があります。固定されたdivの下に隠されないようにする必要があります。
より良い互換性がdisplay: table-footer-group（IE8 +）
逆の効果を達成することができます：それはHTMLコードであるよりも高い要素を移動するために、あなたはtable-captionとtable-header-groupを試すことができます。
imgまたはinputのような自己置換された要素では、少なくともChromeでは（それは正常ですが）divのようにうまく動作しません。
EDIT：それは2016とてもフレキシボックス（およびAutoprefixer）だすべてのもの\ O/