<div id="div1"></div>
<div id="div2"></div>
は、私は（最小幅：768px）desctopの@mediaのCSSで行うオプションが表示されますブロックと左のフロート。 2番目の30％は最初の70％です。 モバイルでは、両方とも100％の幅が必要で、div2をトップdiv1に表示する必要があります。最初のフロートはフロート、2番目のフロートは浮いていない。あなたの助けが必要です。あなたが一番上DIV2をしたい場合は
DIV1の上にDIV2を移動する必要がありますか？フレックスボックスでは、その方向を指定することができます。また、本当に気に入っている場合は、アイテム自体に注文番号を指定することもできます。
#container {
display: flex;
}
#div2 {
width:30%;
height:300px;
background:red;
}
#div1 {
width:70%;
height:300px;
background:green;
}
@media only screen and (max-width: 768px) {
#div1, #div2{
width: 100%;
}
#container {
flex-flow: column-reverse;
}
}<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
</div>ああ、そうです、フレックスはこれを解決するでしょう、そして今はほとんどのブラウザがサポートしていると思います。 –
別の良い解決策もあります！こちらこそありがとう！ –
、あなたのHTMLはどのようにこの程度
#div2 {
width:30%;
height:300px;
background:red;
float:right
}
#div1 {
width:70%;
height:300px;
background:yellow;
float:left
}
@media only screen and (max-width: 768px) {
#div1, #div2 {
width:100%;
}
}<div id="div2">div2</div>
<div id="div1">div1</div>ですが、div1はdiv2の右側にありますか？ –
はい、あなたは正しいです、私はdiv2を右に浮かせるように変更しましたが、div1は左になります –
yesですが、最初にdiv1ブロックをHTMLコードにしておくことができますか？ div1とdiv2がうまく動作しない理由 –
あなたのCSSを投稿することができますか？ –
私たちに何を試してみましたか – Sankar
＃div1 {float：right;表示ブロック;幅：100％; }＃div2 {浮動小数点：左;表示ブロック;幅：100％; } –