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

Question

Я хочу создать макет с начальной загрузкой, где мне нужно, чтобы один столбец был равен двум столбцам по вертикали.Я думаю, что было бы лучше понять, если вы посмотрите на визуальное представление.Кроме того, я хочу, чтобы он реагировал на следующий столбец, обернутый ниже этого макета на меньших устройствах.

Answer 1

Вы должны соответствующим образом структурировать свой HTML.
Попробуйте этот фрагмент кода.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
<div class="col" style="border:1px solid #ccc">Left Column</div>
<div class="col">
<div class="row">
<div class="col" style="border:1px solid #ccc">Right Column Row 1</div>
</div>
<div class="row">
<div class="col" style="border:1px solid #ccc">Right Column Row 2</div>
</div>
</div>
</div>

Answer 2

Попробуйте ниже:

CSS:

<style>

div{
    border:1px solid black;
}
.row, .container{
    border: none;
}
</style>

HTML:

<div class="container">
  <div class="row">
    <div class="col-sm-4">1</div>
    <div class="col-sm-8">
        <div class="row">
          <div class="col-sm-6">2</div>
          <div class="col-sm-6">3</div>
        </div>
        <div class="row">
          <div class="col-sm-6">4</div>
          <div class="col-sm-6">5</div>
        </div>
    </div>
  </div>
</div>