Добрый день, подскажите пожалуйста как в бутстрапе 4 сделать подобное? проблема заключается в колонках 2 и 3, ума не приложу как сделать в десктопной версии их горизонтальными а в мобильной вертикальными...
1 ответ
Можно сделать так, с дублированием блока.
.row>div {
border: solid 1px #ddd;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container py-5">
<div class="row">
<div class="col-4 col-md-3">1</div>
<div class="col-8 col-md-6">
<div class="row">
<div class="col-12">2</div>
<div class="col-12 d-none d-md-block">3</div>
</div>
</div>
<div class="col-12 col-md-3">4</div>
<div class="col-12 d-block d-md-none">3</div>
</div>
</div>
Либо с отрицательным margin
:
.row>div {
border: solid 1px #ddd;
height: 50px;
}
div.a,
div.d {
height: 100px;
}
div.c {
margin-top: -50px; /** половину высоты от блока 1 */
}
@media screen and (max-width: 768px) {
div.c {
margin-top: 0;
}
div.b {
height: 100px;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="a col-4 col-md-3">1</div>
<div class="b col-8 col-md-6">2</div>
<div class="c col-12 order-1 col-md-6 offset-md-3">3</div>
<div class="d col-12 col-md-3">4</div>
</div>
</div>
-
-
@ДенисЛинник, разве что отрицательным margin либо с использованием masonry– entithat30 мар 2021 в 9:45
-