Вопрос по разметки boostrap

Question

Всем привет. Начал изучать boostrap, но столкнулся со сложностью разметки. Нужна разметка по изображению ниже. Сколько не искал по документации, подобного примера я так и не нашел (возможно плохо искал).

Answer 1

[class^=col] {
  min-height: 100px;
}

.blue {
  background: blue;
}

.red {
  background: red;
}

.green {
  background: green;
}

.yellow {
  background: yellow;
}

<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-fluid">
  <div class="row">
    <div class="col-xl-3 blue"></div>
    <div class="col">
      <div class="row">
        <div class="col-12 col-xl-6 order-0 red"></div>
        <div class="col-12 col-xl-6 order-2 order-xl-1 green"></div>
        <div class="col-12 order-1 order-xl-2 yellow"></div>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Вопрос по разметки boostrap

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