Serviceを読んで理解し、同意したものとみなします。スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。6,553件62既出・回答ありましたら申し訳ありません。CSSでレスポンシブレイアウトのサイトを組んでいます。PCサイト表示時は2カラムレイアウト、スマホサイズで1カラムになる構成になっています。上図の左側がPC表示時、右側がスマホ表示時になります。現在上側の構成になっているのですが、下側の順に表示順を変更して欲しいと言う依頼がありました。</div></div>簡単に書くと上記構造になっています。この構造でCをスマホ時に2番目に表示する方法がどうしてもわかりませんでした。floatを使わずpositionで絶対表示にし、ordinal-groupで並べ替える方法も考えてはみたのですが、AとBの高さが可変である為、巧く行きませんでした。どなたか、解決方法ご教授頂けませんでしょうか?宜しくお願い致します。上部を設定するイメージです。あとは下記のコードを試してみてください。個の銅バッジこれは素晴らしいテクニックですね!何故これで実現可能なのか未だにわからないので、勉強させて頂いてます。10:39Bの要素をposition:absolute;に指定することで、rootの高さがAとCの高さの合計になり、BのTOPに100%を指定することでrootの高さぶんB要素が下るということなのですね!ようやく把握できました。ページ数が少なければ構造変更も考えたのですが、影響する箇所がかなり多かったので、対処法悩んでいました。次回からアドバイス分を参考に、最初の組み方から考えて、柔軟に対処出来るようにします。このhack表示は初めて見ました。試してみたのですが、問題無く表示されました。tutinocoさんの補足も合わせて、勉強になりました。調整箇所は出そうですが、一旦突発問題には対処できそうです。皆さま、今回は本当にありがとうございました。急な話で困っていましたので助かりました。|2HTMLの構造を修正したほうが良いと思われます。AとB、そしてCのボックスをdivで囲うのを止め、以下のようにします。class='b'>B</div></div>殆どのPCサイトの場合、ページ全体の横幅が決められていることが多いと思いますので、それを上手く利用します。仮に、ページ全体の横幅を600pxに指定してみました。right;を指定します。right;}これで、スマートフォンではHTMLの通りACBの順に表示され、PCでは中間要素の「C」のみ各要素の右側に「AB」に影響を与えること無く表示させることができます。こちらにサンプルを作成させていただきました。CSS3の新機能ですが、display:flex;とorder:x;を利用することでHTMLの表示順に関係なくコンテンツの位置を入れ替えることが可能になっているようです。flex-boxの詳細についてはこちらの記事がとてもわかり易いです。|回答スタック・オーバーフローに参加してくれて、ありがとうございます!質問の回答を共有してください。回答を説明し、自分の検討結果も共有してください。意見を述べること(意見を述べるなら、参照リソース、自分の経験で意見をサポートしてください)さらにサポートが必要な場合このヘルプを参考してください。“回答を投稿”をクリックすることで利用規約、プライバシーポリシー、及びクッキーポリシーに同意したものとみなされます。タグが付いた他の質問を参照するか、自分で質問をする。質問のフィードこのRSSフィードを購読するには、このURLをコピーしてRSSリーダーに貼り付けてください。