Column not splitting properly - html

Question

Column not splitting properly. I need the bottom picture to go under the same picture above.
Changed col and image size
<div class=" container mx-auto mt-5 p-0">
<div class="row m-0 ">
<div class="col-4 p-0"><a href="ourstory.html"><img src="Mainimages/Ourhistory.jpg" style="width:100%"
alt="Our History"></a>
</div>
<div class="col-8 p-0">
<img src="Mainimages/Promotions.jpg" style="width:100%" alt="Promotions">
</div>
<div class="w-100"></div>
<div class="col-8 p-0">
<img src="Mainimages/Promotions.jpg" style="width:100%" alt="Promotions">
</div>
</div>
</div>

Answer 1

In bootstrap col-6 is synonymous to 50% and col-12 is 100%
So technically to achieve your aim you do:
|--------------------div:col-12------------------------------|
|------div:col-6---------| |----------div:col-6-------------|
|---------------------------| |----------div:row--------------|
|---------img-------------| |-div:col-12-|-|-div:col-12-|
|---------------------------| |-----img----|-|----img--------|
Try the snippet below:
.s50{
height:50%;
}
.s50 img {
width:100%;
height:100%
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mx-auto mt-5 p-0">
<div class="row m-0 ">
<div class="col-6 p-0">
<a href="ourstory.html"><img src="https://pinimg.icu/wall/0x0/los-mejores-fondos-de-pantalla-para-hombres-tumblr-wallpaper-E7f21aa5c622192c35a8e92d039623fcc.jpg?t=5cf09dc88fee5" style="width:100%"
alt="Our History"></a>
</div>
<div class="col-6 p-0">
<div class="col-12 s50 p-0">
<img src="https://hackernoon.com/hn-images/1*lduEjOI-EQltoRbmKSICeA.jpeg" alt="Promotions">
</div>
<div class="col-12 s50 p-0">
<img src="https://d3n8a8pro7vhmx.cloudfront.net/3dna/pages/46410/meta_images/original/00-featured-bs4-bootstrap.jpg?1561992643" style="" alt="Promotions">
</div>
</div>
</div>
</div>

Answer 2

I'm not sure If you're looking for equal half's but you have to split the right hand side column into two rows again using divs to achieve this.
<div class="row">
<div class="col-md-6">
--First left image here--
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
-- second top right image here --
</div>
</div>
<div class="row">
<div class="col-md-12">
-- third bottom right image here --
</div>
</div>
</div>
</div>

Answer 3

We don't have your exact images sizes, but I've tried to put dummy images just show you example, If you want your page to display in the same alignment, you have to divide the div equally which sums up. You can set and divide the divs equally and make it responsive by inserting classes col-sm and col-md.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="feature-wrapper bg-primary pt-5 pb-5 mt-5 mt-lg-0">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 text-center mb-3 mb-md-0">
<a href="ourstory.html"><img src="https://dummyimage.com/100X40/000/fff" style="width:100%"
alt="Our History"></a> </div>
<div class="col-sm-12 col-md-4 text-center text-md-left text-uppercase mb-3 mb-md-0">
<img src="https://dummyimage.com/100X50/000/fff" style="width:100%" alt="Promotions">
</div>
<div class="col-sm-12 col-md-4 text-center mb-3 mb-md-0">
<img src="https://dummyimage.com/200X60/000/fff" style="width:100%" alt="Promotions">
</div>
</div>
</div>
</div>