Кажется, я не могу правильно понять мою загрузочную сетку / flex-box

Question

Я использую Bootstrap 4 и пытаюсь создать веб-сайт для клиента, но я не могу заставить сетку вести себя / расширяться так, как я хочу.

Вот примерЭскиз того, чего я пытаюсь достичь.

Эскиз макета рабочего стола:

Эскиз макета для мобильного телефона:

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

<div class="container">
  <div class="row">
    <div class="col-sm">
      <h1 class="main-cap">Your Caption. Goes Here.</h1>
      <div class="d-flex main-desc flex-grow-0">Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. Vivamus in nisl
        tempor, porttitor quam eu, lacinia nibh. Etiam
        interdum est magna, vel ullamcorper arcu
        dignissim sit amet. Nullam commodo elementum
        felis, id congue dui facilisis sit amet. </div>
    </div>
    <div class="col-sm hidden-xs">
      <img src="assets/vectors/graphic.svg" class="img-fluid graphic-50px" alt="Engineering Graphic">
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
      <div class="col-xs-6 style="padding-left: 30px;">
        <button type="button" class="learn-more btn btn-outline-primary btn-block btn-lg">
             Learn more
          <i class="material-icons arrow-right">keyboard_arrow_right</i>
        </button>
      </div>
  </div>
  <div class="row">
      <div class="socials col-xs-6"></div>
      <div class="email-form col-xs-6"></div>
  </div>

Любая помощь приветствуется. Спасибо.