javascript - 如何在订单上显示特定的 div 类

Question

我正在使用 HTML DIV 循环获取一些数据。可以有更多的数据。数据显示如下代码。DIV 有两个类(test one 和 test two) 如何首先显示所有“测试一个”数据，然后显示“测试两个”数据。我如何使用 javascript 执行此操作？ 或 Jquery ？

My fiddle .

HTML

<div class="container">
   <div class="test one">1</div>
   <div class="test one">1</div>
   <div class="test two">2</div>
   <div class="test one">1</div>
   <div class="test two">2</div>
   <div class="test one">1</div>
   <div class="test two">2</div>
   <div class="test two">2</div>
</div>

Answer 1

这可以使用 flexbox 的 order 属性来实现:

.container {
  display: flex;
  flex-direction: column;
}

.test.two {
  order: 2;
}

<div class="container">
  <div class="test one">1</div>
  <div class="test one">1</div>
  <div class="test two">2</div>
  <div class="test one">1</div>
  <div class="test two">2</div>
  <div class="test one">1</div>
  <div class="test two">2</div>
  <div class="test two">2</div>
</div>