使用 Javascript 移动嵌套的 HTML dom 节点

问：

我有一个类似于以下内容的 DOM 树结构

<div class='row'>
    <div class='cell'>
        <div class='item'>1</div>
        <div class='item'>2</div>
    </div>
    <div class='cell'>
        <div class='item'>3</div>
    </div>
</div>
<div class='row'>
    <div class='cell'>
        <div class='item'>4</div>
        <div class='item'>5</div>
    </div>
    <div class='cell'>
        <div class='item'>6</div>
        <div class='item'>7</div>
    </div>
</div>

这呈现为这个 这是我创建的代码，显示了上述结果

.row {
  display: flex;
  flex-wrap: wrap;
}

.cell {}

.item {
  background-color: #1d8ed2;
  height: 100px;
  width: 200px;
  margin-left: 10px;
  margin-bottom: 10px;
}

<div class='row'>
  <div class='cell'>
    <div class='item'>1</div>
    <div class='item'>2</div>
  </div>
  <div class='cell'>
    <div class='item'>3</div>
  </div>
</div>
<div class='row'>
  <div class='cell'>
    <div class='item'>4</div>
    <div class='item'>5</div>
  </div>
  <div class='cell'>
    <div class='item'>6</div>
    <div class='item'>7</div>
  </div>
</div>

我想以这样一种方式移动香草 javascript 中的元素 项目以此模式移动。

最终渲染应如下预期结果所示

这里棘手的部分是它们在单元格和行中的嵌套方式

我试过了，但预期的结果不是预期的结果

const cells = document.querySelectorAll('.cell');
if (cells.length > 0) {
  cells.forEach((cell, index) => {
    if (cell.children.length == 2) {
      return;
    }

    if (cells[index + 1]) {
      const itemToMove = cells[index + 1].children[0];
      cell.appendChild(itemToMove);
    }
  })
}