Need help with grid system [BEGINNER LEVEL]

I am new with the bootstrap, been using it for a weeks now and so far i am happy with it. Thing is, i am totally unfamiliar with bootstraps grid system.

I am working on a new project, related to DBD fan base. I need to get few things done: I need to create a section with 2 rows and each row will have 2 columns of 50 / 50 % width. I already did it once, thing is i had to use absolute positioning for h2,h3 and p elements. And i do not want that. I want to make it responsive and get most out of the grid system.

Example > https://ibb.co/cHzVtd

(Its created in paint, no PS on lap top. Hopefully you understand what i am up to)

This is what i got so far : Pic 1 > https://ibb.co/eJ5pKJ Pic 2 > https://ibb.co/i4satd

If you know how to set this up, i will strongly appreciate it!

 <!-- SECTION LATEST CONTENT DROPS STARTS -->
    <section class="section-latest-drops">
        <div class="row">
            <div class="col-lg">
                <!-- IMAGES FOR LATEST DROPS SECTION -->
                <a href="https://store.steampowered.com/app/799200/Dead_by_Daylight__Curtain_Call_Chapter/"><img src="resources/images/dbd3.jpg" alt="Curtain Calls Chaper" /></a>
            </div>
                <div class="text-one">
                    <div class="col-lg">
                        <h2>Latest Content Drops</h2>
                        <h3>— Curtain Call Chapter —</h3>
                        <p>People often speak of the tears of a clown, of the sadness that lies beneath the greasepaint smile. What if that wasn’t sadness, but a deep malevolence, born of a life spent in the pursuit of drink and gluttony? A mind that sees others only as vessels for torture, and reduces their bodies down to a single finger, a trophy to be added to a collection? For something like that to survive, it would have to wear a disguise, cloak itself in a brighter aspect and a broad smile, even if it were just painted on.</p>
                        <a href="https://store.steampowered.com/app/799200/Dead_by_Daylight__Curtain_Call_Chapter/">BUY NOW</a>
                        </div>
                    </div>
        </div>
         <div class="w-100"></div>
                <div class="row">
                    <div class="col-lg">
                        <!-- IMAGES FOR LATEST DROPS SECTION -->
                        <a href="https://store.steampowered.com/app/750381/Dead_by_Daylight__the_Saw_Chapter/"><img src="resources/images/dbd7.jpg" alt="The Saw Chapter" /></a>
                    </div>
                    <div class="text-two">
                        <div class="col-lg">
                            <h2>Latest Content Drops</h2>
                            <h3>— Curtain Call Chapter —</h3>
                            <p>People often speak of the tears of a clown, of the sadness that lies beneath the greasepaint smile. What if that wasn’t sadness, but a deep malevolence, born of a life spent in the pursuit of drink and gluttony? A mind that sees others only as vessels for torture, and reduces their bodies down to a single finger, a trophy to be added to a collection? For something like that to survive, it would have to wear a disguise, cloak itself in a brighter aspect and a broad smile, even if it were just painted on.</p>
                            <a href="https://store.steampowered.com/app/799200/Dead_by_Daylight__Curtain_Call_Chapter/">BUY NOW</a>
                        </div>
                        </div>
                </div>               
       </section>

Will this help you:

<div class="row mb-3">
    <div class="col text-center">
        <header>
            <h2>Heading</h2>
            <h3>Heading</h3>
        </header>
        <p>Lorem ipsum dolor sit amet, justo integer, libero mattis quis rhoncus, aliquam tincidunt laoreet. Penatibus egestas ut leo dui, ipsum consectetuer cursus sed urna. Ipsum erat lorem pellentesque torquent scelerisque, augue nullam nisl maecenas
            rhoncus.<br></p>
    </div>
    <div class="col"><img src="https://dummyimage.com/1920x1080/b85eb8/33398a.png&text=1920x1080+sample+from+dummyimage.com" width="100%" /></div>
</div>
<div class="row">
    <div class="col text-center">
        <header>
            <h2>Heading</h2>
            <h3>Heading</h3>
        </header>
        <p>Lorem ipsum dolor sit amet, justo integer, libero mattis quis rhoncus, aliquam tincidunt laoreet. Penatibus egestas ut leo dui, ipsum consectetuer cursus sed urna. Ipsum erat lorem pellentesque torquent scelerisque, augue nullam nisl maecenas
            rhoncus.<br></p>
    </div>
    <div class="col"><img src="https://dummyimage.com/1920x1080/40b868/33398a.png&text=1920x1080+sample+from+dummyimage.com" width="100%" /></div>
</div>

Instead of positioning the headline - Just use bootstrap text-center

Here you can see the order of elements in BSS:

enter image description here

-- Michael

@Ruprect Yes! It works just fine! Thanks a lot!

Ill make sure to set it up correctly using your sample. Thanks a lot!!