CSS-图标的布局随着屏幕尺寸的变化从水平变为垂直

Question

使用某些图标更改屏幕尺寸（到其他设备或视口）时，我遇到问题。

当屏幕尺寸下降到960或以下时，图标从水平方向更改为垂直方向。我在@ media的css中有断点，但对于上面的socialIcons或相关div，在960处没有任何变化。

图标是svg。

正确的布局

布局已损坏

代码段

#social_block {
    margin: 0 auto;
    text-align: center;
    padding-top: 5rem;
    font-weight: bold;
}
#socialDisplay {
    width: 100%;
    padding-bottom: 1rem;
}
.socialIcons {
    width: 100%;
    display: inline;
}


<div id="social_block">

<div id="socialDisplay">CONNECT WITH US</div>


<div class="socialIcons">
<img class="link_item" id="FB" src="/xxx" rel="https://www.facebook.com/xxx/" data-method="open"> 
<img class="link_item" id="IG" src="/xxx" rel="https://www.instagram.com/xxx/" data-method="open"> 
<img class="link_item" id="LI" src="/xxx" rel="https://www.linkedin.com/company/xxx" data-method="open">
</div>

</div>

Answer 1

我将其添加到社交图标CSS

$foo_route = new Route('/api/foo', array('App\Http\Controllers\Api\V2\LuckyController' => 'number') );

#social_block {
  margin: 0 auto;
  text-align: center;
  padding-top: 5rem;
  font-weight: bold;
}

#socialDisplay {
  width: 100%;
  padding-bottom: 1rem;
}

.socialIcons {
  width: 100%;
  display: inline;
  display: flex;
  flex-direction: row;
}