スケーリング時にdivを並べ替える

Question

ウィンドウを縮小するときにdivブロックを「並べ替える」ことは可能ですか？ たとえば、青いdivの前に赤いdivが表示されます.0-770pxの幅のウィンドウに縮小します。しかし、ウィンドウが最小の​​とき。 771ピクセル、青いdivは赤いdivの前に表示されます。

私はJavascriptを使用することはできませんが、javascriptを使用しない解決策は不十分です。

ありがとうございました！

@charset "utf-8"; 
 

 
/* CSS Document */ 
 

 
#wrapper { 
 
    width: 1000px; 
 
    height: auto; 
 
    background-color: grey; 
 
} 
 

 
#boks-green { 
 
    width: 50%; 
 
    background-color: green; 
 
    height: 400px; 
 
    display: block; 
 
    float: left; 
 
} 
 

 
#boks-blue { 
 
    width: 50%; 
 
    background-color: deepskyblue; 
 
    height: 400px; 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
#boks-red { 
 
    width: 50%; 
 
    background-color: red; 
 
    height: 400px; 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
#boks-purple { 
 
    width: 50%; 
 
    background-color: purple; 
 
    height: 400px; 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
@media only screen and (max-width: 770px) { 
 
    #boks-green { 
 
    width: 100%; 
 
    background-color: green; 
 
    height: 400px; 
 
    display: block; 
 
    float: left; 
 
    } 
 
    #boks-blue { 
 
    width: 100%; 
 
    background-color: deepskyblue; 
 
    height: 400px; 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
    } 
 
    #boks-red { 
 
    width: 100%; 
 
    background-color: red; 
 
    height: 400px; 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
    } 
 
    #boks-purple { 
 
    width: 100%; 
 
    background-color: purple; 
 
    height: 400px; 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
    } 
 
}

<div id="wrapper"> 
 
    <div id="boks-green"> 
 
    </div> 
 

 
    <div id="boks-blue"> 
 
    </div> 
 

 
    <div id="boks-red"> 
 
    </div> 
 

 
    <div id="boks-purple"> 
 
    </div> 
 

 
</div>

Answer 1

あなたは、今日quite well supportedである、flexboxを使用して検討するかもしれない場合は、簡単にこれを行うことができます。

最初にメディアクエリが必要な場合は、コンテナがflexコンテナの場合は、子のorder属性を使用して、その要素をどこに表示するかを選択できます。

だから私は使用します。

#boks-blue { 
order: 1; 
} 

#wrapper { 
    display: flex; 
    flex-direction: column; 
} 

メディアクエリの内側。

フレックスボックスhereについて詳しく知ることができます。また、非常にインタラクティブな方法で詳しく調べることもできます。here