How to make div's inside div responsive
<p>I know there are millions of similar questions on the related subject and i've read many of them, but somehow i still don't really get how to position div's or different things based on the media.</p>

<p>So here's the thing. I have a div, which has 4 different div's that are basically just 4 different social-bar pictures. I would like to make them responsive to all media, but most importantly to mobile.</p>

<p>If there's anyone kind enough who could teach me step by step, how to do it, ill be more than happy with it.</p>

<p>So my code looks like this @ the moment.</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="col-sm-5" id="social-bar"&gt;
    &lt;div class="pic1"&gt;&lt;/div&gt;
    &lt;div class="pic2"&gt;&lt;/div&gt;
    &lt;div class="pic3"&gt;&lt;/div&gt;
    &lt;div class="pic4"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>#social-bar
{
float:left;
display: inline-flex;
margin-top: 60px;
}
.pic1
{
background: url('../image/facebook.png') no-repeat;
width:29px;
height:27px;
margin-left: 180px;
}
.pic2
{
background: url('../image/twitter.png') no-repeat;
width:29px;
height:27px;
margin-left: 20px;
}
.pic3
{
background: url('../image/instagram.png') no-repeat;
width:29px;
height:27px;
margin-left: 20px;
}
.pic4
{
background: url('../image/gmail.png') no-repeat;
width:29px;
height:27px;
margin-left: 20px;
}
</code></pre>

<p><strong>This is what i've tried so far, but it doesn't seem to be working</strong></p>

<pre><code>@media screen and (max-width: 350px){
.pic1{
    background: url('../image/facebook.png');
}
}
@media screen and (max-width: 350px){
.pic2{
    background: url('../image/twitter.png');
}
}
@media screen and (max-width: 350px){
.pic3{
    background: url('../image/instagram.png');
}
}
@media screen and (max-width: 350px){
.pic4{
    background: url('../image/gmail.png');
}
}
</code></pre>

<p><strong>This is how social bar is positioned at the moment</strong></p>

<p><a href="https://i.stack.imgur.com/yB1X4.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yB1X4.jpg" alt="enter image description here"></a>
<strong>Any input will be appreciated, thank you guys!</strong></p>