CSSでdivレイアウトを変更しますか？ （代替の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> 

これは、すべてのワークアウトされています小さい画面では、「行」が垂直でなく交互に表示されるようにしたいと考えています。

サムネイルを最初に表示し、次にすべての行の情報を表示したいと考えています。

div要素がポップダウンするため@media文を追加する場合は、私が原因そうのような交互のdiv要素に間違った順序を得る：
第一のサムネイル
第一情報
第二の情報
第二サムネイル

CSSで変更することも可能でしょうか？さまざまなフロートとn番目のチャイルドを試してみましたが、私は同じ結果に終わります。 JSBIN

Answer 1

をあなたはブレークポイントを設定するmediaqueryまたはmin-widthでorderを使用することができます。ここでは

は、私が使用していレイアウトを表示するjsbinです。

.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