Как отображать 3 блока в строке по мере уменьшения размера экрана

Question

В настоящее время у меня есть 6 div внутри тега 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){

}

Когда ширина экрана равна 1000 пикселей, я хочу отображать 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