Как в Bootstrap расположить элемент между двумя строками?

Question

[mrrangerr]

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

<div class="container">
        <div class="row">
          <div class="col d-flex flex-column">
            <div
              style="border-top-right-radius: 60px"
              class="radius bg-dark"
            ></div>
          </div>
        </div>
        <div class="row">
          <div
            style="margin-top: 10rem"
            class="col d-flex justify-content-center"
          >
            <h3>Lorem ipsum</h3>
          </div>
        </div>
        <div class="row mt-2 d-flex align-items-center">
          <div class="col">
            <figure class="d-flex align-items-center">
              <i class="fas fa-user"></i>
              <figcaption class="pl-1">Lorem ipsum</figcaption>
            </figure>
          </div>
          <div class="col">
            <figure class="d-flex align-items-center">
              <i class="fas fa-check"></i>
              <figcaption class="pl-1">Lorem ipsum</figcaption>
            </figure>
          </div>
          <div class="col">
            <figure class="d-flex align-items-center">
              <i class="fas fa-dollar-sign"></i>
              <figcaption class="pl-1">Lorem ipsum</figcaption>
            </figure>
          </div>
          <div class="col d-flex align-items-center">
            <button
              type="button"
              class="btn btn-danger rounded-pill pl-5 pr-5 mb-3"
            >
              Start
            </button>
          </div>
        </div>
        <div class="row mt-5">
          <div class="col">
            <figure>
              <i class="fas fa-phone-square-alt"></i>
              <figcaption class="mt-2">
                <b>Lorem ipsum</b>
              </figcaption>
              <figcaption>
                Lorem ipsum dolor sit amet,<br />
                consectetur adipiscing elit
              </figcaption>
            </figure>
          </div>
          <div class="col">
            <figure>
              <i class="fas fa-phone-square-alt"></i>
              <figcaption class="mt-2">
                <b>Lorem ipsum</b>
              </figcaption>
              <figcaption>
                Lorem ipsum dolor sit amet,<br />
                consectetur adipiscing elit
              </figcaption>
            </figure>
          </div>
          <div class="col">
            <figure>
              <i class="fas fa-phone-square-alt"></i>
              <figcaption class="mt-2">
                <b>Lorem ipsum</b>
              </figcaption>
              <figcaption>
                Lorem ipsum dolor sit amet,<br />
                consectetur adipiscing elit
              </figcaption>
            </figure>
          </div>
        </div>
</div>

Comments

[Andrew]

Сил и здоровья тому, кто будет поддерживать этот код.
Код(примерный):
.container>.row>.col-4+.col-8>h3+.row+.row
4-колонки - для фигуры, 8 - текста(весь экран не вижу, но +-)
.row{
display: flex;
flex-wrap:wrap;
}
.container - посмотрите у Bootstrap'a или чего-то подобного.

[mrrangerr]

Andrew, благодарю!
а какие советы можете дать чтобы этот код был поддерживаемым? SASS использовать или дело не в этом?))

[Andrew]

mrrangerr, тут скорее вопрос в излишествах, смотрите больше чужого кода, желательно, опытных верстальщиков, даже не css, а именно построения html, начиная с простых и потом пробуйте свои задачи строить по примеру.
Если обьекты себя прекрасно чувствуют без ваших .col .col .col. то зачем кол-ы?
обертку
.column{
display:flex;
flex-flow: column wrap;
}
Использую только если нужно дополнительное выравнивание по горизонтали

[Andrew]

mrrangerr,

<div
            style="margin-top: 10rem"
            class="col d-flex justify-content-center"
          >

этот код выглядит оч грязно(инлайн стили и дефолтные классы), по-хорошему, можно сделать так

<div class="text-block">
...
</div>

.text-block{
margin-top: 10rem;
display:flex;
flex-flow: column wrap;
justify-content:center;
}
}

[mrrangerr]

Andrew, спасибо большое!

Answer 1

[Алексей Дагаев]

Если честно не совсем понял что ты хочешь, но попробуй justify-content-center применить к черной фигуре
https://getbootstrap.com/docs/4.5/utilities/flex/

Comments

[mrrangerr]

есть два row, слева на всю ширину двух этих row нужно вставить черную фигуру

[Алексей Дагаев]

mrrangerr, кинь линк на иконки пожалуйста

[mrrangerr]

Алексей Дагаев, https://fontawesome.com/icons?d=gallery

[Алексей Дагаев]

Возможно нужно попробовать это:
htmlbook.ru/css/z-index
Присвой к черной фигуре z-index и поиграйся с ним