使div两列

Question

我在制作列式布局时遇到问题。 这是我的html结构

<div class="col">
   <div>Item 1</div>
   <div>Item 2</div>
   <div>Item 3</div>
   <div>Item 4</div>
   <div>Item 5</div>
   <div>Item 6</div>
   <div>Item 7</div>
</div>

这是一个CSS

.col {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;  
}

这里是result 结果应该看起来像

该如何解决？有什么建议吗？