最大幅480pxの行の順番を逆にする

Question

私は以下のように通常のhtml/cssレイアウトを持っています。しかし、最大幅480ピクセルの場合、section1とsection2の順序を逆にしたいと考えています。私はブートストラップを使用します。

section1行の前にsection2行が必要です。どうやってやるの？

<div class="container" id="content"> 
     <div class="row" id="section1"> 
     </div> 
     <div class="row" id="section2"> 
     </div> 
     <div class="row" id="section3"> 
     </div> 
    </div> 
    <footer> 
    </footer> 

Answer 1

フレックスボックスを使用して、再オーダーする子供のorderプロパティを変更することができます。ここで

@media (max-width: 480px) { 
 
    .container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    } 
 
    #section2 { 
 
    order: -1; 
 
    } 
 
}

<div class="container" id="content"> 
 
    <div class="row" id="section1">1 
 
    </div> 
 
    <div class="row" id="section2">2 
 
    </div> 
 
    <div class="row" id="section3">3 
 
    </div> 
 
</div>

Answer 2

のみ最初の前に、第二のボックスを移動するために、特定のメディアクエリで順序を使用してフレキシボックスのオプションです。残りの注文は同じです：

.container { 
    display: flex; 
    flex-wrap: wrap; 
} 
.row { 
    width: 100%; 
    height: 3em; 
    border: 1px solid red; 
    order: 2; 
} 
@media (max-width: 600px) { 
    #section2 { 
    order: 1; 
    } 
}