У меня при изменение экрана меняется расположение div-а, как его вернуть обратно. Тесть при 767px он удаляет блок с классом ".column-one" и добавляет его после дива с классом ".column-six" и применяется свойства через media querys . Когда окно становится больше 767px мне надо чтобы он вернулся обратно.
Ещё хотел узнать у меня 6 галерей их тут только две(сейчас показал в коде). Чтобы для каждой не изпользовать новую переменную, как сделать чтобы он автоматически вставлялся в конец определённой галереи.
То есть блок с классом "gallery-block-one-column column-one" для
и блок с классом "gallery-block-two-column column-one" для и т.д.
$(function() {
$(window).on('resize', function() {
var publicBlockOne = $('.gallery-block-one');
var firstColumnOne = $('.gallery-block-one .column-one');
var publicBlockTwo = $('.gallery-block-two');
var firstColumnTwo = $('.gallery-block-two .column-one');
var publicBlockThree = $('.gallery-block-three');
var firstColumnThree = $('.gallery-block-three .column-one');
var publicBlockFor = $('.gallery-block-for');
var firstColumnFor = $('.gallery-block-for .column-one');
var publicBlockFive = $('.gallery-block-five');
var firstColumnFive = $('.gallery-block-five .column-one');
var publicBlockSix = $('.gallery-block-six');
var firstColumnSix = $('.gallery-block-six .column-one');
if($(window).width() < 768) {
firstColumnOne.remove();
publicBlockOne.append(firstColumnOne);
firstColumnTwo.remove();
publicBlockTwo.append(firstColumnTwo);
firstColumnThree.remove();
publicBlockThree.append(firstColumnThree);
firstColumnFor.remove();
publicBlockFor.append(firstColumnFor);
firstColumnFive.remove();
publicBlockFive.append(firstColumnFive);
firstColumnSix.remove();
publicBlockSix.append(firstColumnSix);
} else {
publicBlockOne.prepend(firstColumnOne);
publicBlockTwo.prepend(firstColumnTwo);
publicBlockThree.prepend(firstColumnThree);
publicBlockFor.prepend(firstColumnFor);
publicBlockFive.prepend(firstColumnFive);
publicBlockSix.prepend(firstColumnSix);
}
});
});
<div class="gallery-block gallery-block-one"> <!--galery 1-->
<!--columnn 1-->
<div class="gallery-block-one-column column-one">
<img src="images/girl/1113975_small.jpg" alt="">
<img src="images/girl/1153017_small.jpg" alt="">
<img src="images/girl/1153712_small.jpg" alt="">
<img src="images/girl/1549515_small.jpg" alt="">
</div>
<!--columnn 2-->
<div class="gallery-block-one-column column-two">
<img src="images/girl/1555705_small.jpg" alt="">
<img src="images/girl/1645601_small.jpg" alt="">
<img src="images/girl/1657017_small.jpg" alt="">
<img src="images/girl/1686662_small.jpg" alt="">
</div>
<!--columnn 3 and 4 center-->
<div class="gallery-block-one-column column-three-for">
<img src="images/girl/1687893_small.jpg" alt="">
<img src="images/girl/1689629_small.jpg" alt="">
</div>
<!--columnn 5-->
<div class="gallery-block-one-column column-five">
<img src="images/girl/1690545_small.jpg" alt="">
<img src="images/girl/1692584_small.jpg" alt="">
<img src="images/girl/1695113_small.jpg" alt="">
<img src="images/girl/1696314_small.jpg" alt="">
</div>
<!--columnn 6-->
<div class="gallery-block-one-column column-six">
<img src="images/girl/1698791_small.jpg" alt="">
<img src="images/girl/1700506_small.jpg" alt="">
<img src="images/girl/1700737_small.jpg" alt="">
<img src="images/girl/1700745_small.jpg" alt="">
</div>
</div> <!--end galery 1-->
<!---------------------------------------------------->
<div class="gallery-block gallery-block-two"> <!--galery 2-->
<!--columnn 1-->
<div class="gallery-block-two-column column-one">
<img src="images/girl/1701286_small.jpg" alt="">
<img src="images/girl/1701334_small.jpg" alt="">
<img src="images/girl/1702311_small.jpg" alt="">
<img src="images/girl/1702512_small.jpg" alt="">
</div>
<!--columnn 2-->
<div class="gallery-block-two-column column-two">
<img src="images/girl/1726050_small.jpg" alt="">
<img src="images/girl/1731432_small.jpg" alt="">
<img src="images/girl/1736791_small.jpg" alt="">
<img src="images/girl/1737448_small.jpg" alt="">
</div>
<!--columnn 3 and 4 center-->
<div class="gallery-block-two-column column-three-for">
<img src="images/girl/1742202_small.jpg" alt="">
<img src="images/girl/1742678_small.jpg" alt="">
</div>
<!--columnn 5-->
<div class="gallery-block-two-column column-five">
<img src="images/girl/1744311_small.jpg" alt="">
<img src="images/girl/1745945_small.jpg" alt="">
<img src="images/girl/1746069_small.jpg" alt="">
<img src="images/girl/1751496_small.jpg" alt="">
</div>
<!--columnn 6-->
<div class="gallery-block-two-column column-six">
<img src="images/girl/1756206_small.jpg" alt="">
<img src="images/girl/1756262_small.jpg" alt="">
<img src="images/girl/1756904_small.jpg" alt="">
<img src="images/girl/1756998_small.jpg" alt="">
</div>
</div> <!--end galery 2-->
@media screen and (max-width: 767px) {
.column-one, .column-six {
clear: both;
}
.column-one img, .column-six img {
display: inline-block;
margin-top:20px;
margin-right: 20px;
}
.info-board {
left:200px;
}
.wraper-inner {
width: 767px;
}
.column-five img {
margin-right: 0px;
}
}
