CSS Responsive Sorunu [Çözüm'e R10+]

Merhaba arkadaşlar
Aşağıdaki HTML kodlarının masaüstü çıktısında
BAŞLIK --- Özellik 1 ---- Özellik 2 --- Ses
Yanyana gelmektedir.
​Burada Görsel Vardır.​​​

<!-- /.baslangic -->
<div class="share-block">
<div class="left-block">
<p>Başlık Buraya</p>
</div>
<div class="social-block">
<a><i class="fas fa-book">Özellik 1 Buraya</a>
<a><i class="fas fa-swatchbook"></i> Özellik 2 Buraya</a>
<audio controls="controls">
<source type="audio/mpeg" src="ses.mp3">
</audio>
</div>
</div>
<!-- /.son -->

Bunları mobilde nasıl alt alta getirebilirim

Alıntı

BAŞLIK
Özellik 1
Özellik 2
Ses

olacak şekilde

Her birine width 100% verebilirsiniz veya display:block verin. İsterseniz özelden yazın yardımcı olurum.

<br> komutu aşağı in demekti dene bir bakalım belki olur

deniyorum hocam teşekkürler

Direk bootstrap ile kolayca class ekleyerek yapabilirsin, kendin css ile yapmak istersen cihaz boyutuna göre width değerini değiştireceksin.

masaüstünde yanyana kalacak hocam, sadece mobilde alt alta gelecek

<br> komutu masaüstündede indirir css ile yapması lazım ki sadece mobilde yapabilsin.

Aynen bunları ekleyin;
float:none;
dlsplay:block;
width:100%;

@media only screen and (max-width: 768px) {
 .social-block a,  .social-block audio{
 width:100%;
display:block;
  }
}

gibi mesela bu sadece mobilde alt alta getirir onları