Как в Bootstrap 4 сделать такую разметку колонок?

Question

Добрый день, подскажите пожалуйста как в бутстрапе 4 сделать подобное? проблема заключается в колонках 2 и 3, ума не приложу как сделать в десктопной версии их горизонтальными а в мобильной вертикальными...

Answer 1

Можно сделать так, с дублированием блока.

.row>div {
  border: solid 1px #ddd;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>

БЛОГ НА HUSL

Как в Bootstrap 4 сделать такую разметку колонок?

Ответы (1 шт):