隨着屏幕尺寸變小，如何每行顯示 3 個 div

Question

目前，我在一個 div 標簽中有 6 個 div。 所有這些 div 標簽都顯示在一行中。

<div class="main">
    <div class="content"> 1 </div>
    <div class="content"> 2 </div>
    <div class="content"> 3 </div>
    <div class="content"> 4 </div>
    <div class="content"> 5 </div>
    <div class="content"> 6 </div>
</div>

.main{
    display: flex;
    text-align: center;
    justify-content: space-evenly;
}
.content{
    width: 14vw;
    margin: 0px 10px;
    box-sizing: border-box
}

@media(max-width: 1000px){

}

當屏幕寬度等於 1000px 時，我想在頂部顯示 3，在底部顯示 3。 有沒有辦法可以用 CSS 做到這一點，而無需添加額外的 HTML 標簽？

Answer 1

這是你想要的？

.main{
    display: inline-block;
    text-align: center;
    justify-content: space-evenly;
    width:100%
}
.content{
    width: 14vw;
    margin: 0px 10px;
    box-sizing: border-box;
   display: inline-block
}

@media (max-width: 1000px){
.content{
     width: 25% !important;
     display: inline-block;
    }
}

JSfiddle