質問

ショートストーリー

私のHTMLはすでに決まっているとしよう。

<div id="blockA">Block A</div>
<div id="blockB">Block B</div>
<div id="blockC">Block C</div>

このように表示されます。

------------
| Block A  |
------------
| Block B  |
------------
| Block C  |
------------

今度は、ブロックの順番を入れ替えたい。どうすれば CSS ?

------------
| Block C  |
------------
| Block A  |
------------
| Block B  |
------------

を使用するようなハック・ソリューションがあることは承知しています。 position:absolute の有効利用が保たれません。 display:block プロパティを使用します。つまり、ブロックはサイズが大きくなると、他のブロックを下に押してしまうのです。

長編小説

パソコンで私のホームページを見た場合、ブロックはこの順番で表示されます。

1. 一般的な情報です。
2. イベントのスケジュールです。
3. iPhoneアプリ広告

iPhoneアプリの広告が最後に配置されているのは、パソコンユーザーにとってそれほど重要ではないからです。パソコンユーザーのうち、携帯電話を取り出してアプリをインストールする人はごく一部でしょう。

モバイルユーザーがこのサイトを訪れた場合、iPhoneアプリの広告がページ内で最も重要なものになるはずです。ですから、一番上に移動させるべきでしょう。

1. iPhoneアプリの広告
2. 一般的な情報です。
3. イベントのスケジュールです。

iPhoneとパソコンで同じHTMLを共有し、CSSのメディアクエリでブロックの順番を入れ替えられるようにしたいです。

@media only screen and (max-device-width: 480px) {
   #blockC {
      /* magic order switching */
   }
}

解決方法は？

すでに提案されているように フレックスボックス はその答えです。 をサポートするために 単一のモダンブラウザ。モバイルSafariです。

ご覧ください。 http://jsfiddle.net/thirtydot/hLUHL/

を削除することができます。 -moz- のような接頭辞を持つプロパティがありますが、私は将来の読者のために残しておきました。

    #blockContainer {
        display: -webkit-box;
        display: -moz-box;
        display: box;
        
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
    }
    #blockA {
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        box-ordinal-group: 2;
    }
    #blockB {
        -webkit-box-ordinal-group: 3;
        -moz-box-ordinal-group: 3;
        box-ordinal-group: 3;
    }

    <div id="blockContainer">
        <div id="blockA">Block A</div>
        <div id="blockB">Block B</div>
        <div id="blockC">Block C</div>
    </div>