JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<input type="checkbox" id="array-swap-toggle"><label for="array-swap-toggle">Перемешать каждый 1 и 2</label>
<ul class="array-list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<div>
<p>
Не ломается и не свопает элементы при нечетном количестве элементов:
</p>
<input type="checkbox" id="odd-array-swap-toggle"><label for="odd-array-swap-toggle">Перемешать каждый 1 и 2</label>
<p>
еще и можно всякое говно посережине совать, функционал не ломается
</p>
<ul class="array-list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
<div class="troll">
<img src="http://minner.hu/wp-content/uploads/2015/10/trolling.jpg">
</div>

CSS

ul.array-list {
  list-style-type: none;
  padding: 0;
  font-size: 0;
  white-space: nowrap;
}
ul.array-list>li {
  display: inline-block;
  min-width: 1.5em;
  text-align: center;
  font-size: 1rem;
}
input {
  display: none;
}
label, ul.array-list>li {
  background: #484;
  color: #fff;
  padding: 1em;
  border-radius: 100px;
}
ul.array-list>li {
  transition: .2s;
}
label {
  display: inline-block;
  margin: 1em 0;
  cursor: pointer;
}
:checked~.array-list>li:nth-child(odd):not(:last-child) {
  transform: translate(100%);
}
:checked~.array-list>li:nth-child(odd):not(:last-child)+li {
  transform: translate(-100%);
}
.troll {
  width: 200px;
  margin: 50px auto;
  animation: rotate linear infinite 2s;
}
.troll img {
  width: 100%;
}
@keyframes rotate {
  from {transform: rotate(0deg)}
  to {transform: rotate(360deg)}
}