写一段css 3行4列的div 上下两行文字 中间是相同的图片

<style>
.row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

.col {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 25%;
height: 150px;
border: 1px solid black;
}

img {
width: 100px;
height: 100px;
}
</style>

<div class="row">
<div class="col">
<p>上面文字</p>
<img src="image.jpg">
</div>
<div class="col">
<p>上面文字</p>
<img src="image.jpg">
</div>
<div class="col">
<p>上面文字</p>
<img src="image.jpg">
</div>
<div class="col">
<p>上面文字</p>
<img src="image.jpg">
</div>
</div>

<div class="row">
<div class="col">
<img src="image.jpg">
<p>下面文字</p>
</div>
<div class="col">
<img src="image.jpg">
<p>下面文字</p>
</div>
<div class="col">
<img src="image.jpg">
<p>下面文字</p>
</div>
<div class="col">
<img src="image.jpg">
<p>下面文字</p>
</div>
</div>