Javascript 在jQuery中一次将元素从一列移动到另外两列？

我有两个专栏。包含元素的左列

1L, 2L, 3L, 4L, 5L, 6L....

1R, 2R, 3R, 4R..... 

包含元素的右列

1L, 2L, 3L, 4L, 5L, 6L....

1R, 2R, 3R, 4R..... 

我想做的是，若宽度小于991px，则从右列一次提取两个元素，并使用jQuery将它们放在左列中。最后的订单应该是

1L、2L、1R、2R、3L、4L、3R、4R…..

如果宽度大于991px，我想在原始配置中重新排列元素

我事先不知道每列中的元素数。任何列都可能包含更多元素。我想一直移动元素，直到右栏中的元素为零或左栏中的元素全部填满为止。之后，我想将剩余的元素附加到左列。像这样：

1L，2L，1R，2R…7L，8L，7R，8R，9R，10R，11R，12R…

到目前为止。我有以下代码：

 $('#right-col').children().slice(0,2).detach().insertAfter("#left-col .item:first");

它只插入从右栏到左栏的前两个元素，其余元素保持不变。我尝试创建如下循环：

 while($('#right-col').children().length>0) {
   $('#right-col').children().slice(0,2).detach().insertAfter("#left-col .item:first");
 }

但是，这会将所有元素放在第一个元素之后（这是预期的）。我怎样才能以我提到的方式一次将两个元素放在一起

这是我的HTML

<section class="col-md-8" id="left-col">
  <div class="item"> Blah blah blah </div>
  <div class="item"> Blah blah blah </div>
  <div class="item"> Blah blah blah </div>
  .
  .
  .
  <div class="item"> Blah blah blah </div>
</section>
<section class="col-md-4" id="right-col">
  <div class="item"> Blah blah blah </div>
  <div class="item"> Blah blah blah </div>
  <div class="item"> Blah blah blah </div>
  .
  .
  .
  <div class="item"> Blah blah blah </div>
</section>

废话废话
废话废话
废话废话
.
.
.
废话废话
废话废话
废话废话
废话废话
.
.
.
废话废话

---

这里有一个JS提琴：

在我看来，最好通过改变布局来利用Bootstrap内置的“列重新排序”

看一看

类似这样的示例（）：

L1
L2
R1
R2
L3
L4
L1
L2
R1
R2
L3
L4

你应该展示你的html，如果我们不得不想象正在发挥作用的html，人们就不太可能提供帮助：）如果你能制作更好的JSFIDLE，那么你基本上是在使用一些表格来布局你的页面，并且你想为不同大小的屏幕重新安排布局吗？…如果是的话。。。。如果你重视自己的理智，现在就停止。桌子不适合这个。使用这些方法instead@DelightedD0D好的，我将创建一个JS小提琴。请稍候：DCheck out Bootstrap中的此功能用于对列进行重新排序，您可能需要一分钟的时间才能了解此功能，但从长远来看，您会得到更好的服务：），以下是此功能的详细介绍：感谢您的链接：D