//методы которые соеденяют два братских массива .siblings в один
$('ul.siblings').not(':first').remove().children('li').appendTo('ul:first');
<!-- language: lang-css -->
ul {
border: 1px solid red;
background: blue;
}
li {
background: blue;
}
.siblings {
color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<ul class='siblings'>
<li>1
<a>1</a>
<div>1</div>
</li>
<li>2
<a>2</a>
<div>2</div>
</li>
</ul>
<ul class='siblings'>
<li>3
<a>3</a>
<div>3</div>
</li>
<li>4
<a>4</a>
<div>4</div>
</li>
</ul>
</div>
<div class="list">
<ul class='siblings'>
<li>1
<a>1</a>
<div>1</div>
</li>
<li>2
<a>2</a>
<div>2</div>
</li>
</ul>
<ul class='siblings'>
<li>3
<a>3</a>
<div>3</div>
</li>
<li>4
<a>4</a>
<div>4</div>
</li>
</ul>
</div>
Здравствуйте, есть такая структура html, к примеру два **div'a** в каждом по два `ul` , при разрешении < 681 px, **два** `ul` в первом `div` сливаются **в один** `ul` но второго `div` не должно это касаться, он должен быть в пассивном состоянии, и наоборот.
При разрешении > 680 , в **активном div** один `ul` опять становился в начальное положение по **два** `ul`, без потери дочерних элементов. Нужно решить задание _без применения дополнительных классов элементам.
P.S незнаю как размещать здесь сниппеты, заранее прошу прощения
Средний
