How can I specify with flexbox that two divs have to break line together? What I'd like in the example bellow is that, when screen gets smaller, the green and the black divs always jump to a new line together without having to nest them in a new div which will complicate and extend the code.
.categories-home-block {
display:flex;
width: 100%;
flex-direction: row;
flex-wrap: wrap;
align-content: space-between;
justify-content: space-between;
align-items: center;
margin: 10px -8px;
}
.category-home-card {
flex-grow: 1;
}
.category-home-pic{
width: auto;
margin: 25px 5px;
height: 400px;
min-width: 200px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.category-home-pic-1 {
margin-left: 0;
background-color:red;
}
.category-home-pic-2 {
background-color:blue;
}
.category-home-pic-3 {
background-color:yellow;
}
.category-home-pic-4 {
background-color:green;
}
.category-home-pic-5 {
margin-right: 0;
background-color:black;
}
.category-home-link {
justify-content: center;
text-align: center;
}
.category-home-link a {
font: normal 400 18px/22px Montserrat, sans-serif;
text-decoration: none;
color: #252a32;
}
<div class="categories-home-block">
<div class="category-home-card">
<div class="category-home-pic category-home-pic-1"></div>
<div class="category-home-link">
</div>
</div>
<div class="category-home-card">
<div class="category-home-pic category-home-pic-2"></div>
<div class="category-home-link">
</div>
</div>
<div class="category-home-card">
<div class="category-home-pic category-home-pic-3"></div>
<div class="category-home-link">
</div>
</div>
<div style="display: flex;">
<div class="category-home-card">
<div class="category-home-pic category-home-pic-4"></div>
<div class="category-home-link">
</div>
</div>
<div class="category-home-card">
<div class="category-home-pic category-home-pic-5"></div>
<div class="category-home-link">
</div>
</div>
</div>
</div>