html - divを応答的にスタックする

Question

デスクトップ/大画面の場合、次のレイアウトになるレスポンシブサイトで作業しています。

1. ヘッダ
2. メニュー
3. コンテンツ

それからそれが電話/小さな画面にあるときそれは

1. ヘッダ
2. コンテンツ
3. メニュー

どうすればこれを行うことができますか？私が見た例はすべて絶対ポジショニングを使用しているように見えますが、画面のサイズに合わせて動的にし、サイズ/移動を動的にしたいと思います。

ありがとう！

Answer 1

CSS3 flexbox box-direction: reverse;プロパティを使用できます。次のように書きます。

.flex{
    display: -moz-box;
    -moz-box-orient:vertical;
    -webkit-box-orient:vertical;
    display: -webkit-box;
    box-orient:vertical;
    display:box;
    width:100%;
}
.flex div, .header{
    border:1px solid red;
    height:100px;    
}


@media screen and (max-width : 400px){
    .flex{
    -moz-box-direction: reverse;
    -webkit-box-direction: reverse;
    box-direction: reverse;
}
}

これをチェックしてくださいhttp://jsfiddle.net/Hj5pz/

Answer 2

CSS は HTML 要素の順序を並べ替えることができないため、この場合は絶対配置が使用されました。

あるいは、ある形式では表示され、別の形式では表示されない、またはその逆のセクションの非表示の複製が必要になる場合があります。