CSS使用flex布局和order属性对html元素排序

html如下：

<div class="container">
  <div class="type-a">A</div>
  <div class="type-b">B</div>
  <div class="type-c">C</div>
  <div class="type-c">C</div>
  <div class="type-b">B</div>
  <div class="type-b">B</div>
  <div class="type-c">C</div>
  <div class="type-a">A</div>
</div>

现在使用flex布局和order属性对type-a，type-b，type-c的class排序。

.container {
  display: inline-flex;
}

.type-a {
  order: 1;
}

.type-b {
  order: 2;
}

.type-c {
  order: 3;
}

显示的顺序为：
AABBBCCC