Как объединить 2 элемента справа в сетке, используя flexbox?
При уменьшении экрана сетка должна становиться такой:
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуКак объединить 2 элемента справа в сетке, используя flexbox?
При уменьшении экрана сетка должна становиться такой:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.b {
display: flex;
flex-wrap: wrap;
}
.b-inner {
border: 1px solid #ccc;
background: #999;
height: 100vh;
width: 33.333%;
}
.b-item{
height: 50vh;
background: #666;
border: 1px solid #ccc;
}
@media screen and (max-width: 767px) {
.b-inner {
width: 100%;
}
}
<div class="b">
<div class="b-inner">
<div class="b-item">
</div>
<div class="b-item">
</div>
</div>
<div class="b-inner">
<div class="b-item">
</div>
<div class="b-item">
</div>
</div>
<div class="b-inner">
</div>
</div>