cssのみを使用してdivをスワップ

Question

2つのdiv要素を逆順に表示することができますか？ HTMLの変更やJavaScriptコードはありません。ちょうどCSSです。

私は、次のようなHTMLがあります。

<div id="container" class="clearfix"> 
    <div id="right-sidebar">Right</div> 
    <div id="left-sidebar">Left</div> 
</div> 

と、この電流CSS：

#container { 
    width: 200px; 
    border: 2px solid blue; 
    padding: 2px; 
    margin: 0; 
} 

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

#left-sidebar, #right-sidebar { 
    width: 150px; 
    padding: 2px; 
} 

#left-sidebar { 
    border: 2px solid red; 
    float: left; 
} 

#right-sidebar { 
    border: 2px solid green; 
    float: right; 
} 

結果は左の1以上の右のdivを示しています。私はそれらをスワップして、コンテナプロパティ（自動計算された高さ）を維持して、右のものを上に左のものを表示したいと思います。

別の言葉で説明すると、私はHTMLコード内の2つのdivを交換することによって得られるのと同じ結果をCSSだけを使って得たいと思います。

cssだけでも可能ですか？ [私はフロート夢見ている：bottomプロパティを:)]

http://jsfiddle.net/mT7JJ/1/

Answer 1

がthisおよび他の多くによると、私はあなたがCSSでのみ交換することができないかと思いますが、私はこのような状況であなたを助ける何かを見つけたし、それがthis

ですが、しかし、それは本当に効率的ではありません

だから、これはfiddle

#container { 
display: table; width: 200px; 
border:1px red solid; 
} 
#left-sidebar { 
display: table-header-group; 
} 
#right-sidebar { 
display: table-footer-group; 
} 

Answer 2

ザ・だけ私が考えることができると思うと、相対/絶対位置です。

Answer 3

<div id="container" class="clearfix"> 
    <div id="left-sidebar">Left</div> 
    <div id="right-sidebar">Right</div> 

</div> 
#container { 
    width: 200px; 
    border: 2px solid blue; 
    padding: 2px; 
    margin: 0; 
} 

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

#left-sidebar, #right-sidebar { 
    width: 150px; 
    padding: 2px; 
} 

#left-sidebar { 
    border: 2px solid red; 

} 

#right-sidebar { 
    border: 2px solid green; 

} 

であなたの編集になります3210

Answer 4

最新の解決策の1つは、コメントされているように、フレックスレイアウトです。

別のトリッキーposibilitityが使用しているトランスフォーム

webkit demo

Iちょうど逆さまの容器を回転させ、その後、彼らはOKに見えるように、内側のdivをrotaing。ホバーで行われ、ネットエフェクトを表示します。 ホバーはクリアフィックスのために少し不潔ですが、これはここでは関係ありません。

#container:hover { 
    -webkit-transform: rotateX(180deg); 
} 
#container:hover div { 
    -webkit-transform: rotateX(180deg); 
} 

私はCSSを使用してIMPOSIBLE :-)

Answer 5

宣言された質問に答える楽しむ：

#blockContainer { 
display: -webkit-box; 
display: -moz-box; 
display: box; 

-webkit-box-orient: vertical; 
-moz-box-orient: vertical; 
box-orient: vertical; 
} 
#blockA { 
-webkit-box-ordinal-group: 2; 
-moz-box-ordinal-group: 2; 
box-ordinal-group: 2; 
} 
#blockB { 
-webkit-box-ordinal-group: 3; 
-moz-box-ordinal-group: 3; 
box-ordinal-group: 3; 

}

<div id="blockContainer"> 
<div id="blockA">Block A</div> 
<div id="blockB">Block B</div> 
<div id="blockC">Block C</div> 
</div> 

http://jsfiddle.net/hLUHL/713/