3-х столбцовая гибкая коробка не укладывается правильно на некоторые небольшие устройства

Question

Во-первых, я ранга любителя - так что надеюсь, вы простите! Я пытаюсь создать 3-столбцовый макет flexbox (я выбрал это только для равных высотных div), который автоматически складывается на небольших устройствах. Я пробовал все, что мог придумать, но результат состоит в том, что первые два столбца div остаются вместе на одной строке, а третий столбец div - на следующую строку. Я добавил 4-го ребенка в CSS, поскольку изначально мне захотелось 4 столбца, но удаление этого не имело никакого отношения к проблеме, которая у меня есть. Я читал нагрузки и не могу найти ответ. Может быть, кто-то там с подобной проблемой?

Это УС:

.flexbox { 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    flex-wrap: wrap; 
    align-items: stretch; 

} 


.flexbox .col { 
    flex: 1; 
    margin: 10px; 
} 

.flexbox .coltext { 
    flex: 1; 
    padding: 15px; 
    margin: 10px; 
    background: #fff; 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 

} 
.flexbox .col:nth-child(1) { 
    background: #fff; 
    -webkit-order: 0; 
    -ms-flex-order: 0; 
    order: 0; 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
} 
.flexbox .col:nth-child(2) { 
    background: #fff; 
    -webkit-order: 1; 
    -ms-flex-order: 1; 
    order: 1; 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
} 
.flexbox .col:nth-child(3) { 
    background: #fff; 
    -webkit-order: 2; 
    -ms-flex-order: 2; 
    order: 2; 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
} 

.flexbox .col:nth-child(4) { 
    background: #fff; 
    -webkit-order: 3; 
    -ms-flex-order: 3; 
    order: 3; 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
} 


@media (max-width: 480px) { 
    #container div { 
     max-width: 98%; 
    } 
} 
@media (min-width: 480px) and (max-width: 1080px) { 
    #container div { 
     max-width: 48%; 
    } 
} 
@media (min-width: 1080px) { 
    #container div { 
     max-width: 23%; 
    } 
} 

Это HTML (с описательным текстом удалены):

<div class="flexbox"> 
    <div class="col"> 
    <img src="images/homepage_images/OVERHEAD (4).jpg" style="width:100%"><br><br> 
     <h5><center><strong>Bournemouth Town Centre regeneration</strong></center></h5> 
    <p class="justify text-justify w3-padding"> 
<br><br> 
    <a class="w3-btn w3-red w3-medium" href="#">learn more..</a></p> 
    </div> 


    <div class="col"> 
    <img src="images/homepage_images/Poundstock.jpg" style="width:100%"><br><br> 
    <h5><center><strong>contract awards</strong></center></h5> 
     <p class="justify text-justify w3-padding"> <br><br> 
     <a class="w3-btn w3-red w3-medium" href="#">learn more..</a></p> 
    </div> 



    <div class="col"> 
    <img src="images/homepage_images/_MG_0342rawprepx.jpg" style="width:100%"><br><br> 
     <h5><center><strong>latest from General Works</strong></center></h5> 
     <p class="justify text-justify w3-padding"> 
    <br><br> <a class="w3-btn w3-red w3-medium" href="#">view</a></p></div> 
</div> 

Answer 1

простой способ для достижения желаемого эффекта будет установка flex-direction к column:

@media (max-width: 480px) { 
    #container div { 
     max-width: 98%; 
    } 
    .flexbox { 
    flex-direction: column; 
    } 
} 

SNIPPET (Shrink окно вывода)

.flexbox { 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    align-items: stretch; 
 

 
} 
 

 

 
.flexbox .col { 
 
    flex: 1; 
 
    margin: 10px; 
 
} 
 

 
.flexbox .coltext { 
 
    flex: 1; 
 
    padding: 15px; 
 
    margin: 10px; 
 
    background: #fff; 
 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
 

 
} 
 
.flexbox .col:nth-child(1) { 
 
    background: #fff; 
 
    -webkit-order: 0; 
 
    -ms-flex-order: 0; 
 
    order: 0; 
 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
 
} 
 
.flexbox .col:nth-child(2) { 
 
    background: #fff; 
 
    -webkit-order: 1; 
 
    -ms-flex-order: 1; 
 
    order: 1; 
 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
 
} 
 
.flexbox .col:nth-child(3) { 
 
    background: #fff; 
 
    -webkit-order: 2; 
 
    -ms-flex-order: 2; 
 
    order: 2; 
 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
 
} 
 

 
.flexbox .col:nth-child(4) { 
 
    background: #fff; 
 
    -webkit-order: 3; 
 
    -ms-flex-order: 3; 
 
    order: 3; 
 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
 
} 
 

 

 
@media (max-width: 480px) { 
 
    #container div { 
 
     max-width: 98%; 
 
    } 
 
    .flexbox { 
 
    flex-direction: column; 
 
    } 
 
} 
 
@media (min-width: 480px) and (max-width: 1080px) { 
 
    #container div { 
 
     max-width: 48%; 
 
    } 
 
} 
 
@media (min-width: 1080px) { 
 
    #container div { 
 
     max-width: 23%; 
 
    } 
 
}

<div class="flexbox"> 
 
    <div class="col"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="width:100%"><br><br> 
 
     <h5><center><strong>Bournemouth Town Centre regeneration</strong></center></h5> 
 
    <p class="justify text-justify w3-padding"> 
 
<br><br> 
 
    <a class="w3-btn w3-red w3-medium" href="#">learn more..</a></p> 
 
    </div> 
 

 

 
    <div class="col"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="width:100%"><br><br> 
 
    <h5><center><strong>contract awards</strong></center></h5> 
 
     <p class="justify text-justify w3-padding"> <br><br> 
 
     <a class="w3-btn w3-red w3-medium" href="#">learn more..</a></p> 
 
    </div> 
 

 

 

 
    <div class="col"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="width:100%"><br><br> 
 
     <h5><center><strong>latest from General Works</strong></center></h5> 
 
     <p class="justify text-justify w3-padding"> 
 
    <br><br> <a class="w3-btn w3-red w3-medium" href="#">view</a></p></div> 
 
</div>