用CSS更改div佈局？ （Alternating divs）

Question

我正在爲WordPress寫一個插件。佈局是如下，在水平行中顯示：

<div class="row"> 
    <div class="thumbnail"> 
    <div class="information"> 
</div> 

的PHP-函數交替的div所以每隔一行是相反的次序，如下：

<div class="row"> 
    <div class="information"> 
    <div class="thumbnail"> 
</div> 

這是所有工作了在全屏頁面中，但在較小的屏幕上，我希望將「行」垂直顯示爲非交替。

所以我想首先顯示縮略圖，然後是每行的信息。

當添加@media報表股利流行下來，我得到了錯誤的順序，由於交替的div像這樣：
1縮略圖
第一信息
第二信息
第二縮略圖

所以我想知道是否有可能通過CSS進行更改？嘗試了很多不同的花車和第n個孩子，但我最終得到了相同的結果。

這裏是展示佈局我使用的是jsbin： JSBIN

Answer 1

可以使用order與mediaquery或用min-width設置一個斷點。

.row { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-wrap:wrap; 
 
} 
 

 
.information { 
 
    flex: 1; 
 
    padding: 5%; 
 
    min-width:250px;/* set a breakpoint at 500px where thumb is set at 50% */ 
 
} 
 

 
.thumbnail { 
 
    flex: 1; 
 
    min-width: 50%;/* min-width will allow to spray on the whole line when alone */ 
 
    background: teal; 
 
} 
 
@media screen and (max-width: 640px) { 
 
.row:nth-child(odd) .thumbnail { 
 
    order:1; 
 
} 
 
    }

<div class="row"> 
 
    <div class="thumbnail">thumb</div> 
 
    <div class="information">information goes here</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="information">information goes here</div> 
 
    <div class="thumbnail">thumb</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="thumbnail">thumb</div> 
 
    <div class="information">information goes here</div> 
 
    </div>

最小寬度+順序http://jsbin.com/xupurikuxu/1/edit?html,css,output

mediaquerie http://jsbin.com/senobugubi/1/edit?html,css,output