JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a">1</div>
<div class="a">2</div>
<div class="a">3</div>
<div class="a">4</div>
<div class="a">5</div>
<div class="a">6</div>
<div class="b">1</div>
<div class="b">2</div>
<div class="b">3</div>
<div class="b">4</div>
<div class="b">5</div>
<div class="b">6</div>

CSS

.a, .b {
  padding: .5em;
  display: inline-block;
}
.a {
  background: tomato
}
.b {
  background: yellow
}

JavaScript

var a = document.querySelectorAll('.a'),
    b = document.querySelectorAll('.b')

a.forEach((el, i)=>el.parentNode.insertBefore(b[i], el.nextSibling))