9350


既出・回答ありましたら申し訳ありません。

CSSでレスポンシブレイアウトのサイトを組んでいます。  
PCサイト表示時は2カラムレイアウト、スマホサイズで1カラムになる構成になっています。

![レイアウト変更](https://i.stack.imgur.com/ECt9V.jpg)

上図の左側がPC表示時、右側がスマホ表示時になります。  
現在上側の構成になっているのですが、下側の順に表示順を変更して欲しいと言う依頼がありました。

[code]

    <div>
    　<div style="float:left;">
    　　<p>A</p>
    　　<p>B</p>
    　</div>
    　<div style="float:right;">
    　　<p>C</p>
    　</div>
    </div>
    
[/code]

簡単に書くと上記構造になっています。  
この構造でCをスマホ時に2番目に表示する方法がどうしてもわかりませんでした。

floatを使わずpositionで絶対表示にし、ordinal-
groupで並べ替える方法も考えてはみたのですが、AとBの高さが可変である為、巧く行きませんでした。

どなたか、解決方法ご教授頂けませんでしょうか？  
宜しくお願い致します。


CC BY-SA 4.0
2015-04-20T08:03:48.180
9342
2020-01-26T03:53:35.623
2020-01-26T03:53:35.623
32986
9396
question
css
CSSで要素の順番を変更する方法はありますか？


構造を下記のように変更したらどうでしょうか？

[code]

    <div style="float:left;">
      <p>A</p>
    </div>
    <div style="float:right;">
      <p>C</p>
    </div>
    <div style="float:left; clear: left;">
      <p>B</p>
    </div>
    
[/code]


CC BY-SA 3.0
2015-04-20T08:28:42.567
9343
2015-04-20T08:28:42.567
3371
9342
answer


HTMLの構造を修正したほうが良いと思われます。

まず、AとB、そしてCのボックスをdivで囲うのを止め、以下のようにします。

[code]

    <div class='container'>
      <div class='a'>A</div>
      <div class='c'>C</div>
      <div class='b'>B</div>
    </div>
    
[/code]

殆どのPCサイトの場合、ページ全体の横幅が決められていることが多いと思いますので、それを上手く利用します。

仮に、ページ全体の横幅を600pxに指定してみました。（＊ 以降のCSSはPCのみ適応する）

[code]

    .container {
        width: 600px;
    }
    
[/code]

そして、「A、B」と「C」の幅の合計がコンテナと同じ600pxになるようにし、「A、B」に`float: left;`、「C」には`float:
right;`を指定します。

[code]

    .a, .b {
        width: 200px;
        float: left;
    }
    
    .c {
        width: 400px;
        float: right;
    }
    
[/code]

これで、スマートフォンではHTMLの通りACBの順に表示され、PCでは中間要素の「C」のみ各要素の右側に「AB」に影響を与えること無く表示させることができます。

[こちら](http://jsfiddle.net/e785b0cb/3/)にサンプルを作成させていただきました。

なお、CSS3の新機能ですが、`display:flex;`と`order:x;`を利用することでHTMLの表示順に関係なくコンテンツの位置を入れ替えることが可能になっているようです。

flex-boxの詳細については[こちら](http://liginc.co.jp/web/html-
css/css/21024)の記事がとてもわかり易いです。


CC BY-SA 3.0
2015-04-20T08:34:11.193
9345
2015-04-20T20:14:30.267
2015-04-20T20:14:30.267
8351
8351
9342
answer


かなり hacky + 綺麗に見せるにはもう何手間か要ると思いますが、トップ要素を `relative` にし、 B を `absolute` にして
`top: 100%` とすることで C の下に配置できます。 トップ要素には A と C だけが格納され、その下に B
の上部を設定するイメージです。あとは下記のコードを試してみてください。

[code]

    /* この回答のキモ */
    .root {
        position: relative;
    }
    .B {
        position: absolute;
        top: 100%;
        width: 100%;
    }
    
    /* それっぽく見せるための装飾 */
    .A {
        background-color: #ffcccc;
        height: 100px;
    }
    .B {
        background-color: #ccffcc;
        height: 200px;
    }
    .C {
        background-color: #ccccff;
        height: 400px;
    }
    div {
        margin: 0;
        padding: 0;
    }
[/code]

[code]

    <div class='root'>
        <div>
            <div class='A'>A</div>
            <div class='B'>B</div>
        </div>
        <div>
            <div class='C'>C</div>
        </div>
    </div>
[/code]


CC BY-SA 3.0
2015-04-20T10:11:46.797
9350
2015-04-20T10:11:46.797
208
9342
answer