Как использовать rowspan в структуре таблицы на основе div?

Question

Я делаю проект на основе сетки.Я использую загрузчик, CSS и HTML для создания сетки.Мне нужно отобразить сетку, как это Изображение .Но диапазон строк не работает должным образом.Я использую полностью структуру div, а не таблицу.Мой код: `

<div>
<div class="row">
<div class="col-md-4">
</div>
</div>
<div class="col-md-4">
</div>
<div rowspan="2" class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>

`

Answer 1

Используйте class = "short-div" в col-md-6 в обоих div.Удалите col-md-6 из обоих div, также удалите rowspan.

Answer 2

Сначала я бы предложил использовать отступы, чтобы сделать его более читабельным.

Вы бы просто создали 3 столбца рядом друг с другом, а в середине начните новую строку.

В примере кода я создаю 1 строку и 2 столбца полной ширины, вы также можете просто создать 2 строки.

<div class='container'>
  <div class='row'>
    <div class='col-4 col1'>1</div>
    <div class='col-4'>
      <div class='row'>
        <div class='col-12 col2'>2</div>
        <div class='col-12 col3'>3</div>
      </div>
    </div>
    <div class='col-4 col4'>4</div>
  </div>  
</div>

https://codepen.io/anon/pen/XOYZRG?editors=1100