Q:

Reorder DIVs on smaller screens

We are looking for a solution, to reorder DIVs, if the screen size gets smaller.
Our divs images are grey and white.
On a screen size that is bigger than 1024px we use a 3 column layout.
If the screen size gets smaller we use a 2 column layout.
The problem is that we have to reorder the divs on the 2 column layout.
Otherwise the layout breaks and we don't have the chess pattern.
Take a look where that should take place: printnil.com
@media only screen and (min-width: 0px)  {
      .mix {width: 100%;}
}
 @media only screen and (min-width:568px) {
     .mix {width: 50%;}
}  

@media only screen and (min-width:1024px) {
   .mix {width: 33.333%;}
 }

<div class="mix grey">

<a href="/products/angebotsmappe">

<img src="{{ 'grey.jpg' | asset_url }}" alt="Urkundenmappe - DIN 4,95 €">

<div class="infogrey">  
<h2 class="producttitle">Urkundenmappe</h2>
<span class="price">4,95 €</span>
</div>

</a>

</div>

<div class="mix white">

<a href="/products/angebotsmappe">

<img src="{{ 'white.jpg' | asset_url }}" alt="Sammelmappe - DIN 4,95 €">

<div class="infowhite">    
<h2 class="producttitle">Sammelmappe</h2>
<span class="price">4,95 €</span>
</div>

</a>

</div>  

<div class="mix grey">

<a href="/products/angebotsmappe">

<img src="{{ 'grey.jpg' | asset_url }}" alt="Angebotsmappe - DIN 4,95 €">

<div class="infogrey">    
<h2 class="producttitle">Angebotsmappe</h2>
<span class="price">4,95 €</span>
</div>

</a>

</div>    

<div class="mix white">

<a href="/products/angebotsmappe">

<img src="{{ 'white.jpg' | asset_url }}" alt="Schnellhefter - DIN 4,95 €">

<div class="infowhite">      
<h2 class="producttitle">Schnellhefter</h2>
<span class="price">4,95 €</span>
</div>

</a>

</div>  

<div class="mix grey">

<a href="/products/angebotsmappe">

<img src="{{ 'grey.jpg' | asset_url }}" alt="Klemmmappe - DIN 4,95 €">

<div class="infogrey">        
<h2 class="producttitle">Klemmmappe</h2>
<span class="price">4,95 €</span>
</div>

</a>

</div>    

<div class="mix white">

<a href="/products/angebotsmappe">

<img src="{{ 'white.jpg' | asset_url }}" alt="Ringordner - DIN 4,95 €">

<div class="infowhite">          
<h2 class="producttitle">Ringordner</h2>
<span class="price">4,95 €</span>
</div>

</a>

</div>

Maybe a JavaScript solution?

A:

if you don't need to support IE8 and earlier, you can use the CSS3 nth-child(). the css design is for the illustration, change it to what you need:  
.mix
{
    float: left;
    text-align: center;
    border: 1px solid;
}

.mix img
{
    display: inline-block;    
    max-width: 50%;
}

@media only screen and (min-width:568px)
{
    .mix
    {
        width: 50%;
    }

    .mix:nth-child(4n+1), .mix:nth-child(4n+4)
    {  
        background: #999;
    }  
}

@media only screen and (min-width:1024px)
{
    .mix
    {
        width: 33.333%;
    }

    .mix:nth-child(4n+1), .mix:nth-child(4n+4)
    {  
        background: none;
    }

    .mix:nth-child(odd)
    {  
        background: #999;
    }
}

example: http://jsfiddle.net/7h36fjnq/ - resize the window to see it working.

