Как выполнить создание изображений поверх формы с помощью столбцов Bootstrap

Question

У меня есть этот дизайн, и я хочу выполнить его с помощью Bootstrap. Если я сделаю col-4 для формы, мне нужно будет сделать изображение col-8, и это сделает его более маленьким, чем должно быть. Так вот мой код

 <div class='main-section'>
    <div class="row header-section mt-5 mb-5">
    <u>The Ne</u>w Era of Transportation
    </div>
    <div class="row content-section">
    <!-- image -->
    <div class="col-9">
      Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. 
      Separated they right at the coast of the Semantics. 
    <img class="img-fluid" src="../../assets/img/home.png"/>
    </div>
    <!-- end of image -->
    <!-- form section -->
    <div class="col-3">
    <form>
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>
    </div>
    <!-- form section -->
    </div>
  </div>