jquery - jQuery レスポンシブ列。

Question

レスポンシブ デザインを使用しており、レスポンシブ カラムを作成したいと考えています。そのため、大きな画面では項目が 2 列に保存され、小さな画面では 1 つの列に保存されます。商品の高さは異なる場合があります。アイテムは正しい順序で配置する必要があります (下の画像を参照)。

1. 1 -> 2 から

1 列のレイアウト:

<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>

それを 2 つの列に変換するスクリプト。

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

2. 2から -> 1

2 列のレイアウト:

<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>

それを1列に変換するスクリプト。

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();

$(".container item").unwrap() を 2 番目のオプションに使用することはできません。アイテムの順序が保存されないためです。

すべてが機能しますが、より簡単な解決策があるかどうか疑問に思います (特に 2 オプションの場合)。提案や助けをいただければ幸いです。