html - div无法正确定位在移动设备上

我的div类信息容器在移动设备上的位置似乎不正确。代码似乎还可以，所以不确定是什么问题。我只希望在移动设备徽标下方的类信息容器。但是，该代码似乎并未发挥作用。
我是html / css的新手

 .topSection {
    display: flex;
    justify-content: space-between;
    }

    .info-container {
    display: flex;
    flex-direction: column;
    }

    .info {
     display: flex;
     align-items: center;
     }

      .info img {
      margin-right: 8px;
      }

      @media only screen and (max-width: 600px) {
    .info-container {
        position: relative;
        top:12px;
        left:5px;
        }
        }

    <div class="topSection">
    <div class="logo">
    <a href="http://www.elegantcurtainsandblinds.co.uk/index.php"><img
    src="http://www.elegantcurtainsandblinds.co.uk/images/eg_logo_new.png"
    alt="Logo"></a>
    </div>
    <div class="info-container">
    <div class="info">
      <img src="http://elegantcurtainsandblinds.co.uk/images/mobile.png" height="30px" width="30px;" />
      <a style="text-decoration:none;color:#2B8C1A;" href="tel:01924724848">Call Us: 01924 724848</a>
    </div><br>

    <div class="info">
      <a href="https://www.google.co.uk/maps/dir/''/elegant+curtains+and+blinds/@53.6967136,-1.7011525,12z/data=!4m8!4m7!1m0!1m5!1m1!1s0x487960059226814f:0x337f355d1975d87c!2m2!1d-1.631113!2d53.696734" target="_blank"><img src="http://elegantcurtainsandblinds.co.uk/images/images.png" height="30px" width="30px;"></a>
      <p style="color:#2B8C1A">Visit Our Showroom</p>
    </div><br>

    <div class="info">
      <a href="https://youtu.be/DAasK7kF2DQ" target="_blank"><img src="http://elegantcurtainsandblinds.co.uk/images/video.png" height="30px" width="30px; target="_blank""></a>
      <p style="color:#2B8C1A">Watch Our Video</p>
    </div>
    </div>
    </div>

最佳答案

添加媒体查询此CSS

@media only screen and (max-width: 600px){
    .topSection {
       display: unset;
    }
}

关于html - div无法正确定位在移动设备上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51649516/