I am trying to use jQuery to change the order of div's. 

On the desktop version it have a product image on the left then the next on the right so and so fourth. But when it gets to the mobile version (done with media queries) and the use of 1140px grid, i get the image above and then below etc. I want it to be consistant with the image above and text below. 

I thought that using jQuery might be the best way to fix this. But i am struggling to make it work. 

here is the code i am trying to use it might be close or might be super far off. I am kinda new to jQuery 

2. $(document).ready(function(){
3.     if ($(window).width() < 600) {
4.         $("#bottom").insertAfter($("#top"));
5.     }
6. });

I am using ID's for the div that i want on the top and bottom named accordingly 

Thanks for any help you can provided i am stuck