Как сверстать данный блок на bootstrap 3?

Question

[WebforSelf]

Добрый день, есть такой блок и необходимо его отверстать на bootstrap 3



Как лучше сверстать? в сетку включить блоки? или добавить флекс и на флексах отверстать?

Comments

[Александр Присяжнюк]

Если вам можно юзать флексы, то зачем тогда 3 бутстрап?

[WebforSelf]

Александр Присяжнюк, старая верстка, все переделывать не вариант. Может лучше тогда на бустрапе и сделать?

[Lord_Dantes]

WebforSelf, на флексах проще

[WebforSelf]

slave bb, Да это понятно, а как сделать это правильно на 3 бустрапе? Отступов нет, по сетке вроде можно разделить на блоки.

Answer 1

[Алекс]

Если что то и делал последнее время на бутстрапе то только на 4 версии.
Верстка примерно такая должна быть. На 4 версии все шикос (ну да там флексы), на третьей чет не могу так сразу вспомнить как элемент с классом col-4 растянуть по всей высоте родителя. (если знаете, подскажите)

<div class="container">
  <div class="row">
    <div class="col-4" style="background-color:yellow;">1</div>
    <div class="col-8">
      <div class="row">
        <div class="col-12" style="background-color:green;">2</div>
        <div class="col-12" style="background-color:#4f4;">3</div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-6" style="background-color:pink;">4</div>
    <div class="col-6" style="background-color:#f44;">5</div>
  </div>
</div>

Answer 2

[Василий]

Я бы первые 3 элемента разбил бы на две колонки в первой колонке 1 блок на всю высоту во второй колонке 2 блока один под другим.

последние две картинки это две равные колонки. Внутренние блоки с описанием это отдельные кастомные блоки с позиционированием absolute.

В принципе комментарий выше именно так и предлагает.