Birbirinin üzerine çıkan yazılar ve konumlandırma - CSS&HTML

Arkadaşlar selam, bayadır uğraşıyorum da css terk olduğum için ne yazık ki yapamadım.

Amacım 2 sağda 2 solda bir container oluşturmak, resimlerden de anlayacağınız gibi sağdaki alanda youtube ve twitter embedi olucak. Soldaki alanda portfolyo tarzı 2 parça yazı yazıcak.

Sorunum ise şu kendi çapımda css bilgim ile yapıyorum fakat mobil görünüme geçtiğim zaman responsive olmuyor ve twitter embedi, solundaki yazının üzerine çıkıyor, bu durumda istediğim şey mobil görünüme geçildiğinde twitter embedin'in soldaki yazının altına inip boyunun küçülmesi ve genişlemesi olacak aynı şekilde youtube embedini de bu şekilde yapmak istiyorum.

Ekran Görüntüleri:

Masaüstü görünüm:

Telefon için görünüm:

HTML Kodlarım ise şunlar;

    <div class="blog-page-area blog-page-fullwidth section-padding">

<div class="container py-3 mt-3 mw-100 mh-100">
    <img src="http://yeni.cengizaydin.com.tr/Files/Image/hakkimizda/cengiz-aydin.jpg" width="233" height="324" style="color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;" />
    <div class="row">
    <div class="d-flex justify-content-between">
    	<div>
    		            	    <span style="font-family: impact,chicago; font-size: medium;"><span><span style="font-family: 'arial black', 'avant garde'; font-size: medium;">Dr.Cengiz AYDIN</span></span></span></br>
            	    <div class="col-md-4"><span style="font-family: impact,chicago; font-size: medium;"><span><span style="font-family: 'arial black', 'avant garde'; font-size: medium;"></span></span></span><span style="font-family: impact,chicago; font-size: medium;"><span style="color: #000000; font-family: book antiqua,palatino; font-size: medium;"></span><span style="font-family: 'book antiqua', palatino; font-size: small;"><span style="color: #000000; word-break: break-word;">1975 yılında Çaykarada doğdu. Marmara Üniversitesi Bilgi ve Belge Yönetimi bölümünden mezun oldu. Aynı üniversitede Türkiyat Araştırmaları Ensti tüsü ile Sakarya Üniversitesinde Siyaset Bilimi ve Kamu Yönetimi alanında yüksek lisansını</span> <a href="http://yeni.cengizaydin.com.tr/tr_hakkimda-40.html">&gt;&gt;</a></span></span></div>
    	</div>
    	<div>
    		Youtube Embed
    	</div>
</div>
    </div>
    <hr>
    <!--- Alt Satır --->
    <div class="row">
    <div class="d-flex justify-content-between">
    	<div>
					<span style="color: #000000; font-family: 'arial black', 'avant garde'; font-size: medium;">EVLİYA ÇELEBİ’NİN İZİNDEN BOSNA’YI KEŞFETMEK</span>
            	    <div class="col-md-4"><span style="font-family: impact,chicago; font-size: medium;"><span><span style="font-family: 'arial black', 'avant garde'; font-size: medium;"></span></span></span><span style="font-family: impact,chicago; font-size: medium;"><span style="color: #000000; font-family: book antiqua,palatino; font-size: medium;"></span><span style="font-family: 'book antiqua', palatino; font-size: small;"><span style="color: #000000; word-break: break-word;">Bosna-Hersek derin tarihsel ve kültürel bağlarımızın olduğu ve her açıdan buram buram Anadolu kokan bir ülkedir. Bosna’yı anlamak için geçmişe bakmak, tarihin izlerini takip etmek gerekmektedir. Saraybosna'dan Mostar ve Poçitel’e,  Travnik ve Bihaç’a  kadar giden her kesin Osmanlı Kültür mirasının ağırlığını hissetmemesi, adeta tarihi solumaması mümkün değildir</span> <a href="http://yeni.cengizaydin.com.tr/tr_makaleler-54.html">&gt;&gt;</a></span></span></div>

    	</div>
    	<div id="timeline-tw">
    		<a class="twitter-timeline" data-lang="tr" data-width="800" data-height="650" data-theme="dark" href="https://twitter.com/cngzaydn?ref_src=twsrc%5Etfw" id="restwitter">Dr. Cengiz AYDIN'ın tweetleri</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    	</div>
</div>
    </div>
</div>
</div>

Kodların çalıştığı web sitesine ulaşmak için tıkla

Cevaplayan olursa yorumu için şimdiden teşekkür ederim.