title: Reorder DIVs on smaller screens
body: <h2>We are looking for a solution, to reorder DIVs, if the screen size gets smaller.</h2>
  
  <p>Our divs images are grey and white.</p>
  
  <p>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.</p>
  
  <p><strong>Take a look where that should take place: <a href="http://printnil.com/collections/all" rel="nofollow noreferrer">printnil.com</a></strong></p>
  
  <pre><code>@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%;}
   }
  
  
  &lt;div class="mix grey"&gt;
  
  &lt;a href="/products/angebotsmappe"&gt;
  
  &lt;img src="{{ 'grey.jpg' | asset_url }}" alt="Urkundenmappe - DIN 4,95 €"&gt;
  
  &lt;div class="infogrey"&gt;  
  &lt;h2 class="producttitle"&gt;Urkundenmappe&lt;/h2&gt;
  &lt;span class="price"&gt;4,95 €&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;/a&gt;
  
  &lt;/div&gt;
  
  
  
  
  
  &lt;div class="mix white"&gt;
  
  &lt;a href="/products/angebotsmappe"&gt;
  
  &lt;img src="{{ 'white.jpg' | asset_url }}" alt="Sammelmappe - DIN 4,95 €"&gt;
  
  &lt;div class="infowhite"&gt;    
  &lt;h2 class="producttitle"&gt;Sammelmappe&lt;/h2&gt;
  &lt;span class="price"&gt;4,95 €&lt;/span&gt;
  &lt;/div&gt;
  
  
  &lt;/a&gt;
  
  &lt;/div&gt;  
  
  
  
  
  
  &lt;div class="mix grey"&gt;
  
  &lt;a href="/products/angebotsmappe"&gt;
  
  &lt;img src="{{ 'grey.jpg' | asset_url }}" alt="Angebotsmappe - DIN 4,95 €"&gt;
  
  &lt;div class="infogrey"&gt;    
  &lt;h2 class="producttitle"&gt;Angebotsmappe&lt;/h2&gt;
  &lt;span class="price"&gt;4,95 €&lt;/span&gt;
  &lt;/div&gt;
  
  
  &lt;/a&gt;
  
  &lt;/div&gt;    
  
  
  
  
  
  &lt;div class="mix white"&gt;
  
  &lt;a href="/products/angebotsmappe"&gt;
  
  &lt;img src="{{ 'white.jpg' | asset_url }}" alt="Schnellhefter - DIN 4,95 €"&gt;
  
  &lt;div class="infowhite"&gt;      
  &lt;h2 class="producttitle"&gt;Schnellhefter&lt;/h2&gt;
  &lt;span class="price"&gt;4,95 €&lt;/span&gt;
  &lt;/div&gt;
  
  
  &lt;/a&gt;
  
  &lt;/div&gt;  
  
  
  
  
  
  &lt;div class="mix grey"&gt;
  
  &lt;a href="/products/angebotsmappe"&gt;
  
  &lt;img src="{{ 'grey.jpg' | asset_url }}" alt="Klemmmappe - DIN 4,95 €"&gt;
  
  &lt;div class="infogrey"&gt;        
  &lt;h2 class="producttitle"&gt;Klemmmappe&lt;/h2&gt;
  &lt;span class="price"&gt;4,95 €&lt;/span&gt;
  &lt;/div&gt;
  
  
  &lt;/a&gt;
  
  &lt;/div&gt;    
  
  
  
  
  
  &lt;div class="mix white"&gt;
  
  &lt;a href="/products/angebotsmappe"&gt;
  
  &lt;img src="{{ 'white.jpg' | asset_url }}" alt="Ringordner - DIN 4,95 €"&gt;
  
  &lt;div class="infowhite"&gt;          
  &lt;h2 class="producttitle"&gt;Ringordner&lt;/h2&gt;
  &lt;span class="price"&gt;4,95 €&lt;/span&gt;
  &lt;/div&gt;
  
  
  &lt;/a&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/GkGNw.jpg" alt="enter image description here">
  Maybe a JavaScript solution?</p>