Reorder DIVs on smaller screens

Question

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?

Answer 1

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.

Answer 2

I would suggest you to use some kind of responsive grid system. There are a lot of existing examples. Check out this one:

http://getbootstrap.com/examples/offcanvas/

Grid systems:

http://getbootstrap.com

http://foundation.zurb.com

http://www.responsivegridsystem.com

Answer 3

There are several good libraries for this sorry if thing. Twitter bootstrap is the most common/popular, but it has been around long enough for other, more radical solutions to become available. My personal favorite is semantic-ui. You can have divs that are only visible on different device types, making it possible to design an interface for mobile and an interface for the desktop at different sizes.

Twitter bootstrap is probably the best choice, but semantic is definitely worth looking at.