Merhabalar galeri bölümü oluşturdum responsive olması için @media etiketi ile çalışıyorum ancak mobil kodları ile masaüstü css kodları aynı anda o divi etkiliyor saçma bir görüntü ortaya çıkıyor

HTML KODUM
<div class="book-table-area  pt--100 pt_md--80 pt_sm--60">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="brook-section-title-restaurant text-center mb--50">
                                
                                <div  id="iletisim" class="bkseparator--10"></div>
                                <h3  class="color-white"><font color="#BC9464">İletişim Bilgilerimiz</font> </h3>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-12">
                            <div class="book-table-form">
                              
                                
                                <div class="iletisim-bilgileri" >
                                    <div class="iletisim-satir">
                                        <div class="icon">
                                            <i class="fas fa-user"></i>
                                        </div>
                                        
                                        <div class="bilgi">
                                            <h5>Genel koordinatör</h5>
                                            <p>Alptekin Karaman</p>
                                        </div>
                                        
                                    </div>
                                    <div class="iletisim-satir">
                                        <div class="icon">
                                            <i class="fas fa-phone-alt"></i>
                                        </div>
                                        <div class="bilgi">
                                            <h5>İletişim</h5>
                                            <p>0541 852 52 19</p>
                                        </div>
                                    </div>
                                    <div class="iletisim-satir">
                                        <div class="icon">
                                            <i class="fas fa-map-marker-alt"></i>
                                        </div>
                                        <div class="bilgi">
                                            <h5>Adres</h5>
                                            <p>Küçükçekmece/ İSTANBUL</p>
                                        </div>
                                    </div>
                                </div>
                              
                            </div>
                        </div>
                    </div>
                </div>
            </div>


CSS KODUM
.iletisim-bilgileri {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
        .iletisim-satir {
            display: flex;
            align-items: center;
        }
        .icon {
            background-color: #BC9464;
            color: #fff;
            font-size: 28px; /* İkon boyutu büyütüldü */
            width: 60px; /* Daire boyutu büyütüldü */
            height: 60px; /* Daire boyutu büyütüldü */
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
        }
        .icon i {
            margin-left: -1px;
        }
        .bilgi {
            text-align: left;
        }
        .bilgi h3 {
          color: black;
          font-weight: bold;
          letter-spacing: 0.5px;
      }
      .bilgi p {
          font-weight: normal;
          font-size: 22px; /* İçerik yazılarını 18px olarak ayarladım */
          letter-spacing: 1px;
      }



@media (max-width: 768px) {
  .col-lg-4 {
      flex: 0 0 100%;
      max-width: 100%;
  }
  .footer-widget {
      text-align: center;
  }
  .footer-address {
      margin-top: 20px;
  }
  .social-share {
      display: flex;
      justify-content: center;
  }
  .social-share a {
      margin: 5px;
  }
  .footer-address p {
      margin: 5px 0;
  }

  .footer-widget {
      text-align: left;
  }
  .footer-address {
      margin-top: 0;
  }
  .footer-address p {
      margin: 0;
  }
}