I'm relatively new to frontend development and I'm facing a challenge in organizing a layout using Bootstrap 4. My goal is to create a banner for the landing page. I have attached an example of how I want the layout to look, please take a look. Below is my code, but it's causing the layout to mess up by overlapping elements.
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-12">
<img src="assets/images/logo.png" alt="">
</div>
<div class="col-sm-12 ml-auto">
<h1 class="presentation-title">COMPANY NAME IN H1</h1>
<div class="fog-low">
<img src="assets/img/fog-low.png" alt="">
</div>
<div class="fog-low right">
<img src="assets/img/fog-low.png" alt="">
</div>
<h2 class="presentation-subtitle text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</h2>
</div>
</div>
</div>