CSS3 Flexbox的響應爲

Question

少校：添加codepen：http://codepen.io/anon/pen/srGwq

我開始處理Flexbox的一個非常具體的項目。隨着文檔頻繁更換，我不會處理我的問題。

這裏是我的html：

<div class="flexbox"> 
    <div class="middle">Middle</div> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
</div> 

而且我的CSS（無前綴lisibility）：

.flexbox { 
    display: box; 
    box-orient: horizontal; 
    box-align: start; 
} 

.middle { 
    box-flex-group: 1; 
    box-flex: 2; 
    box-ordinal-group: 2; 
} 

.left { 
    box-flex-group: 1; 
    box-flex: 1; 
    box-ordinal-group: 1; 
} 

.right { 
    box-flex-group: 1; 
    box-flex: 1; 
    box-ordinal-group: 3; 
} 

所以，結果是這樣的：

________________________ 
| .left .middle .right | 
|______________________| 

隨着媒體查詢，我改變了方塊組和方向組以獲得移動上的結果：

____________ 
| .middle | 
| .left | 
| .right | 
|__________| 

所以，問題是，我需要把。左和.right在平板電腦上的一個左側立柱垂直排列，就像這樣：

____________________ 
| .left .middle | 
| .right   | 
|__________________| 

我試圖把。左和.right到box-ordinal-group：1並將midmid設置爲box-primary-group：2，但結果是.left和.right在左側水平排列，我將它們垂直排列。

因爲我不太瞭解Flexbox，所以您的經驗值得歡迎。也許這是不可能的。

非常感謝，對於壞模式感到抱歉，我沒有獲得發佈圖片的可能性。

Answer 1

看到柔性流動性：

http://dev.w3.org/csswg/css3-flexbox/#flex-flow-property

僞代碼：

@media $ {QUERY_TABLET {.flexbox彎曲流：行包}}

Answer 2

我在我的包裝佈局的github bredele上放一些例子。你應該通過彈性流（行/列換行）和彈性基礎（初始最小寬度）來玩弄你想要的東西。

隨着行包流量：

.flexbox { 
    display: -webkit-flex; 
    display:flex; 
    -webkit-flex-flow: row wrap; 
    flex-flow: row wrap; 
} 

.left, .right { 
    -webkit-flex: 1 50%; 
    flex: 1 50%; 
} 

.middle { 
    width:50%; 
} 

帶柱包裹流量：

.flexbox { 
    /* the height has to be defined */ 
    height:400px; 
    display: -webkit-flex; 
    display:flex; 
    -webkit-flex-flow: column wrap; 
    flex-flow: column wrap; 
} 

.left, .right { 
    -webkit-flex: 1 50%; 
    flex: 1 50%; 
} 

.middle { 
    -webkit-flex: 1 100%; 
    flex:1 100%; 
} 

我認爲第二個方案是，你在找什麼。

奧利維爾:)