html - 幅が小さい場合、右フロートdivの後に左フロートdiv

Question

例： http： //jsfiddle.net/tkKth/

ウィンドウのサイズを変更しているとき（set .container {width:200px;}）、左のdivが右のdivの後に表示されます。divの左/右がhtmlドキュメント内の位置を変更するときにcssでこれを行う方法はありますか？-> <div class="left">Left div</div> <div class="right">Right div</div>

ありがとう

Answer 1

6あなたの例ではhttp://jsfiddle.net/tkKth/右のdivは左の前にあります

<div class="container">
<div class="right">Right div</div>
<div class="left">Left div
</div>​

あなたの質問ではそれは逆です

<div class="container">
<div class="left">Left div</div>
<div class="right">Right div</div>
</div>​

.containerwidthが<=.leftwidth＆.right widthの場合、最初に提供されます

左側の高さが固定されている場合（たとえば36px）、min-device-widthでメディアクエリを使用できます。画面が600px未満の場合は、これを.rightに追加します。

top:36px; /* equivalent to .left height*/
position:absolute;

Answer 2

数年後、flexboxは十分にサポートされているため、これは次の方法で実現できます。

.container { 
    display: flex; 
}

.left {
    order: 2;
}

.right {
    order: 1;
}