How to show specific div class on order

Question

I'm getting some data using loop to HTML DIVs. There can have many more data. Data showing something like below code.There have two classes for DIVs (test one and test two ) How to show all of "test one" data first and then "test two" data.How can i do this with javascript or 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

This can be achieved using the order property of flexbox:

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