javascript - Send the elements of a div to another div -

I have images of various heights, and I want to put them in a tiled gallery like the image below: < / P>

However, I also want to I was oppressive, so my job was to do this:

1) Using HTML, I created three divs, # grid1 , # grid2 And # grid3 . And the images are placed in Inner 3 box, in which the class .gridElement contains the images.

  & lt ;! - Grid system - & gt; & Lt; Div id = "grid1" & gt; & Lt ;! - Grid 1 - & gt; & Lt; Div class = "grid element" & gt; & Lt; Img alt = "image" src = "property / image / image.jpg" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "grid2" & gt; & Lt ;! - Grid 2 - & gt; & Lt; Div class = "grid element" & gt; & Lt; Img alt = "image" src = "property / image / image.jpg" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "grid3" & gt; & Lt ;! - Grid 3 - & gt; & Lt; Div class = "grid element" & gt; & Lt; Img alt = "image" src = "property / image / image.jpg" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt ;! - / Grid system - & gt;  

2) The CSS is here using the media query:

  / * grid system * / # grid1, # ​​grid2, # grid3 {width : 33.333%; Swim left; } # Grid1 {padding-right: 20px; } # Grid2 {padding: 0 10px; } # Grid 3 {padding-left: 20px; } / * Grid elements * / .gridElement {margin-down: 30px; Hidden flurry; } # Grid1 .gridElement: Previous type, # grid2 .gridElement: Previous type, # grid3 .gridElement: Previous type {margin-down: 0; } # Grid1 img, # grid2img, grid3img {width: 100%; }  

and

  @ media screen and (max-width: 1024px) {/ * grid system * / # grid1, # ​​grid2, # Grid3 {width: 50%; } # Grid3 {display: none; }}  

and

  @ media screen and (max-width: 770px) {/ * grid system * / # grid1, # ​​grid2, # Grid3 {width: 100%; } # Grid1, # ​​Grid2, # Grid3 {Wines: 0; Display area; } # Grid1 .gridElement: Previous type, # grid2 .gridElement: The last type {margin below: 30px; }  

and

  @ media screen and (max-width: 500 pixels) {/ * grid system * / .gridElement {margin-bottom: 20px ; } # Grid1 Grad Element: Previous-Type, # Grid 2 Grid Element: The Last Type {margin-down: 20 pixels; }  Principle:  When the screen size is above 1024px, it will show three grid by default. However, when the screen size is hidden below 1024px and above 770px using CSS  # grid3  and I'm using Javascript then I try to send all the  .girdElements  I am doing that equally within # grid3 # to grid 1 and # grid 2 when the screen size is below 770px, then each normal will return and all grids will be displayed. 
 
 The problem? I have been able to do everything but Javascript - please help me in creating any function which will send all grid elements which are similar to # grid 3, for # grid1 and # grid2 when the screen size 1024px And above 770px? "On load and re-size". 
 

You can try to do something like this:

  var Toggle = True; $ ('# Grid3') Children ('Grid Element') Each (function (index) {if (toggle) {$ ('# grid1'). Append ($ (this)); Toggle = wrong;} and {$ ('# Grid2'). ADD (($ (this)) ; Toggle = true;}  

An example is working on JSF, element inside the grid