title: Rearranging html for responsive design
body: <p>Yesterday I asked help for a html design where I could get the floating div's right. I got the right answer on that <a href="https://stackoverflow.com/questions/23369456/css-html-floating-issue-with-divs/23369586#23369586">question</a>, thanks for that. Now I'm trying to use that same HTML in a responsive design. And again I'm running stuck. I need to change the order of the HTML to get the design working in the different responsive sizes. Therefore I probably need javascript and I don't believe that's how it should be done.</p>
  
  <p>My basis HTML looks like this:</p>
  
  <pre><code>&lt;div class="product"&gt;
    &lt;div class="box box-1"&gt;box 1&lt;/div&gt;
    &lt;div class="box box-2"&gt;box 2&lt;/div&gt;
    &lt;div class="box box-3"&gt;box 3&lt;/div&gt;
    &lt;div class="box box-4"&gt;box 4&lt;/div&gt;
    &lt;div class="box box-5"&gt;box 5&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>There are 3 different responsive sized, which are shown in this image:
  <img src="https://i.stack.imgur.com/UTUyF.png" alt="enter image description here"></p>
  
  <p>I posted the code on <a href="http://codepen.io/anon/pen/gjomb/right/" rel="nofollow noreferrer">codepen</a>. You can move the devider in the middle to resize the window and see what happens.</p>
  
  <p>Like i said, in my opinion I need to rearrange the HTML. For the <code>min-width: 757px</code> I think I need to move the div <code>box-1</code> behind <code>box-5</code>. 
  And for <code>max-width: 756px</code> I also need to move <code>box-3</code> in front of <code>box-1</code>. How can should I do this, without using javascript?</p>