jQuery响应列。

Question

我们正在使用响应式设计，我们希望制作响应式列。 因此，在大屏幕上，项目将存储在2列中，并且存储在小列中。物品可以有不同的高度。项目应按正确顺序排列（见下图）。

1。从1 - ＆gt; 2

一栏布局：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

将其转换为两列的脚本。

$(".container > .item:odd").wrapAll('<div class="column" />');
$(".container > .item").wrapAll('<div class="column" />');

2。从2 - ＆gt; 1

两列布局：

<div class="container">
  <div class="column">
    <div class="item">1</div>
    <div class="item">3</div>
    <div class="item">5</div>
  </div>
  <div class="column">
    <div class="item">2</div>
    <div class="item">4</div>
    <div class="item">6</div>
  </div>
</div>

将其转换为一列的脚本。

while($(".container .column .item").length > 0)
      {
        $(".container").append($(".container .column:eq(0) .item:first"))
        $(".container").append($(".container .column:eq(1) .item:first"))
      }
$(".container2 .column1").remove();

我们不能使用$（“。容器项目”）。unwrap（）作为第二个选项，因为它不会保存项目顺序。

一切正常但我们想知道是否有任何解决方案会更容易（特别是对于2选项）。我们将不胜感激任何建议或帮助。