DIV-Layout mit CSS ändern? (Alternierende Divs)

Question

Ich schreibe ein Plugin für WordPress. Das Layout ist wie folgend, in einer horizontalen Reihe dargestellt:

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

die PHP-Funktion wechselt die divs so jede zweite Zeile ist die umgekehrte Reihenfolge, etwa so:

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

Dies ist alles Ausarbeiten in einer Vollbildseite, aber auf einem kleineren Bildschirm möchte ich die "Zeile" vertikal nicht alternierend angezeigt bekommen.

So möchte ich zuerst die Miniaturansicht angezeigt bekommen, dann die Informationen für jede Zeile.

Wenn die @media Aussagen Zugabe für die div Pop nach unten, erhalte ich die falschen Reihenfolge aufgrund der Wechsel divs wie so:
1. Thumbnail
1. Informationen
2. Informationen
2. Thumbnail

Also frage ich mich, ob es sogar möglich ist, über CSS zu ändern? Ich habe viele verschiedene Floats und n-te Kinder probiert, aber am Ende habe ich dieselben Ergebnisse.

ist hier ein jsbin das Layout zu zeigen, ich bin mit: JSBIN

Answer 1

Sie order mit einem mediaquery verwenden oder mit einem min-width einen Haltepunkt zu setzen.

.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>

min-width + bestellen http://jsbin.com/xupurikuxu/1/edit?html,css,output

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