title: How to make div's inside div responsive
body: <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>