CSS неравномерное позиционирование

Question

Я хочу расположить div в соответствии с рисунком:

До сих пор я добился успеха, используя Bootstrap s row класс и использование z-index в моем CSS. Но когда я изменяю размер браузера, он не реагирует, он просто всплывает с правой стороны страницы. Кстати, я использую position: absolute (я читал в Интернете, что я должен использовать это, чтобы использовать z-index). Есть ли другой, более элегантный способ сделать это? Я хочу, чтобы он был отзывчивым, но не могу найти другого обходного пути, кроме того, который я реализовал. 1011

Код:

#div2 {
  float: inherit;
  position: absolute;
  top: inherit;
  left: 60%;
  width: 320px;
  height: 1290px;
  z-index: 5;
}

<div class="container">
  <div class="div-container">
    <div class="row">
      <div id="div1">
        <p>Div 1</p>
      </div>
      <div id="div2" align='center'>
        <p>Div 2</p>
      </div>
    </div>
    <div class="row">
      <div id="div3">
        <p>Div 3</p>
      </div>
    </div>
  </div>
</div>

Answer 1

Вам необходимо использовать вложенные строки внутри столбца. Смотрите здесь - Bootstrap Вложенность . Игнорируйте CSS здесь, так как оно используется для стилизации фрагмента, а высота используется для игнорирования содержимого.

.B {
  min-height: 130px;
  background: #393276;
  margin-bottom: 20px;
}

.A {
  min-height: 100px;
  margin-bottom: 20px;
  background: #393276;
}

.C {
  min-height: 250px;
  background: #393276;
}

div {
  text-align: center;
  color: #fff;
  font-size: 32px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />


<div class="container mt-4">
  <div class="row">
  
    <!-- First Column -->
    <div class="col-sm-6">

      <!--Rows nested inside a column-->
      <div class="row">
        <div class="col-12">
          <div class="A">A</div>
        </div>
      </div>

      <div class="row">
        <div class="col-12">
          <div class="B">B</div>
        </div>
      </div>
    </div>
    
    <!-- Second Column -->

    <div class="col-sm-6">
      <div class="C">C</div>
    </div>
  </div>
</div>

Answer 2

Я использовал flexbox , чтобы сохранить адаптивный дизайн и некоторое расположение полей, чтобы сохранить формацию.

.container{
  display: flex;
  flex-wrap: wrap;
  width: 150px;
}
.div1, .div3{
  margin-right: 5px;
  width: 50px;
  height: 50px;
}
.div2{
  margin-right: 5px;
  width: 50px;
  height: 110px;
}

<div class="container">
<div class="div1"> div1 </div>
<div class="div2"> div2 </div>
  <br/>
<div class="div3" style="margin-top: -55px;"> div 3 </div>
</div>