Bootstrap 4 引导4上的行包装

我试图放置待办事项列表中的一些列和行，但我希望其顺序如下：

1 4 7
2 5 8
3 6 9

不像：

1 2 3
4 5 6

在我的代码中，有一个按钮将向数组中添加新元素，当我单击它时，它将显示在带有Vue.Js的新的

上：

 <div class="container p-2 bg-dark text-white">
   <ul class="row">
     <li class="col-sm-3" v-for="(tarea, index) in tareas" @click="active">{{index}}-{{tarea}}</li>
   </ul>
 </div>

{{index}-{tarea}

你能帮我吗？

你可以用

命令来做，但是如果没有js脚本，它将无法动态工作。。。这是一个硬编码示例：

 <div class="container p-2 bg-dark text-white">
   <ul class="row">
     <li class="col-sm-4 order-1">1</li>
     <li class="col-sm-4 order-4">2</li>
     <li class="col-sm-4 order-7">3</li>
     <li class="col-sm-4 order-2">4</li>
     <li class="col-sm-4 order-5">5</li>
     <li class="col-sm-4 order-8">6</li>
     <li class="col-sm-4 order-3">7</li>
     <li class="col-sm-4 order-6">8</li>
     <li class="col-sm-4 order-9">9</li>
   </ul>
 </div>



1
2
3
4
5
6
7
8
9