I have a regular unordered list of links, which I would like to change using js

<ul>
  <li><a href="#">Theme 1</a></li>
  <li><a href="#">Theme 2</a></li>
  <li><a href="#">Theme 3</a></li>
  <li><a href="#">Theme 4</a></li>
  <li><a href="#">Theme 5</a></li>
  <li><a href="#">Theme 6</a></li>
  <li><a href="#">Theme 7</a></li>
  <li><a href="#">Theme 8</a></li>
  <li><a href="#">Theme 9</a></li>
  <li><a href="#">Theme 10</a></li>
  <li><a href="#">Theme 11</a></li>
  <li><a href="#">Theme 12</a></li>
</ul>

I would like the following output:

<div class="themes__row">
  <div class="themes__item><a href="#">Theme 1</a></div>
  <div class="themes__item><a href="#">Theme 2</a></div>
  <div class="themes__item><a href="#">Theme 3</a></div>
  <div class="themes__item><a href="#">Theme 4</a></div>
</div>
<div class="themes__row">
  <div class="themes__item><a href="#">Theme 5</a></div>
  <div class="themes__item><a href="#">Theme 6</a></div>
  <div class="themes__item><a href="#">Theme 7</a></div>
  <div class="themes__item><a href="#">Theme 8</a></div>
</div>
<div class="themes__row">
  <div class="themes__item><a href="#">Theme 9</a></div>
  <div class="themes__item><a href="#">Theme 10</a></div>
  <div class="themes__item><a href="#">Theme 11</a></div>
  <div class="themes__item><a href="#">Theme 12</a></div>
</div>

I have tried a few different solutions back and forth, but it ends up being really messy, so I dont really have any code to show. How is this done in a clever way? The site is using jQuery 1.4.4 if that matters.