Отправить элементы div в другой div

У меня есть изображения разной высоты, и я хочу разместить их в черепичной галерее, как показано на рисунке ниже:

Однако я также хочу, чтобы это было репрессивным, поэтому мой подход к этой работе был следующим:

1) Использование HTML Я создал три дивы, #grid1, #grid2 и #grid3. И изображения помещаются внутри этих трех сеток в div div, у которых есть класс .gridElement который содержит изображения.

<!--Grid System-->
<div id="grid1">
    <!--Grid 1-->
    <div class="gridElement">
        <img alt="image" src="assets/images/image.jpg">
    </div>
</div>
<div id="grid2">
    <!--Grid 2-->
    <div class="gridElement">
        <img alt="image" src="assets/images/image.jpg">
    </div>
</div>
<div id="grid3">
    <!--Grid 3-->
    <div class="gridElement">
        <img alt="image" src="assets/images/image.jpg">
    </div>
</div>
<!--/Grid System-->

2) Вот CSS, используя Media Query:

/*Grid System*/
#grid1,#grid2,#grid3 {
   width: 33.333%;
   float: left;
}

   #grid1 {
      padding-right: 20px;
   }

   #grid2 {
      padding: 0 10px;
   }

   #grid3 {
      padding-left: 20px;
   }

   /*Gird Elements*/
   .gridElement {
      margin-bottom: 30px;
      overflow: hidden;
   }

   #grid1 .gridElement:last-of-type,
   #grid2 .gridElement:last-of-type,
   #grid3 .gridElement:last-of-type {
      margin-bottom: 0;
   }

   #grid1 img,#grid2 img,#grid3 img {
      width: 100%;
   }

а также

@media screen and (max-width: 1024px) {
   /*Grid System*/
   #grid1,#grid2,#grid3 {
      width: 50%;
   }

   #grid3 {
      display: none;
   }
}

а также

@media screen and (max-width: 770px) {
   /*Grid System*/
   #grid1,#grid2,#grid3 {
      width: 100%;
   }

   #grid1,#grid2,#grid3 {
      padding: 0;
      display: block;
   }

   #grid1 .gridElement:last-of-type,
   #grid2 .gridElement:last-of-type {
      margin-bottom: 30px;
   }

а также

@media screen and (max-width: 500px) {
   /*Grid System*/
   .gridElement {
      margin-bottom: 20px;
   }

   #grid1 .gridElement:last-of-type,
   #grid2 .gridElement:last-of-type {
      margin-bottom: 20px;
   }

Они теории: когда размер экрана превышает 1024 пикселей, по умолчанию будут отображаться три сетки. Однако, когда размер экрана ниже 1024px и выше 770px с использованием CSS #grid3 скрыт и с использованием JavaScript, я пытаюсь отправить все .girdElements которые находятся внутри # grid3, равно равно # grid1 и # grid2. Когда размер экрана ниже 770 пикселей, все вернутся в нормальное состояние, и все сетки будут показаны.

Проблема? Мне удалось получить все, работая, но JavaScript - пожалуйста, кто-нибудь может помочь мне создать функцию, которая будет отправлять все.girdElements, которые находятся внутри # grid3 одинаково, на # grid1 и # grid2, когда размер экрана ниже 1024 пикселей и выше 770 пикселей? "при загрузке и изменении размера".