Fixing footer issues in web page

I've a requirement where if the size of browser is less than 992*1024, then scrolling would be added automatically. Footer which I wrote is working, but I'm unable to position Media part. I wrote a footer as shown in the screen shot:

I'm trying to create a footer which is similar to this:
Here is the code.

.imgcontainer {
  background: #E6E6E6;
  box-shadow: 0 4px 2px 1px #000;
}
#footer {
  height: 350px;
  background: #003663;
  min-width: 992px;
}
#footerItems {
  min-width: 992px;
  width: 100%;
  padding: 0px 6%;
  min-width: 992px;
}
#footerItems div {
  display: inline-block;
  color: #FFF;
  padding-top: 2%;
  font-weight: bold;
  font-size: 16px;
}
.accountPos {
  padding-left: 3%;
}
#footerItems div ul {
  padding-left: 0;
}
#footerItems div ul li {
  list-style-type: none;
  font-weight: 400;
  font-size: 13px;
  font-style: italic;
}
#videoptions {
  height: 74px;
  width: 23px;
  background-color: #4c5053;
}
#footerItems div video {
  min-width: 35px;
  min-height: 30px;
}
.socialinks {
  min-width: 450px;
  width: 39%;
  float: left;
}
.slinks {
  padding-left: 14%;
}

<script src="http://ift.tt/1InYcE4"></script>
<link href="http://ift.tt/1IoGhOh" rel="stylesheet" />
<link href="http://ift.tt/1QMqYrP" rel="stylesheet" />
<link href="http://ift.tt/1K1B2rp" rel="stylesheet" />
<div id="footer">
  <div class="col-md-12 imgcontainer">
    <img src="images/Bistip-in-media.png" class="center-block">
  </div>
  <div id="footerItems" class="col-md-12">
    <div style="width: 12%;">About Us
      <ul>
        <li>About us</li>
        <li>Media reviews</li>
        <li>Bistip guide</li>
      </ul>
    </div>
    <div class="accountPos" class="">Account Information
      <ul>
        <li>About us</li>
        <li>Media reviews</li>
        <li>Bistip guide</li>
      </ul>
    </div>
    <div class="accountPos" class="col-md-3" style="padding-left: 9%;">Market
      <ul>
        <li>About us</li>
        <li>Media reviews</li>
        <li>Bistip guide</li>
      </ul>
    </div>
    <div class="accountPos" style="padding-left: 9%;">Bistip
      <ul>
        <li>About us</li>
        <li>Media reviews</li>
        <li>Bistip guide</li>
      </ul>
    </div>
    <div class="" style="padding-top: 2%;">Media
      <div>
        <video controls height="30" width="60">
          <source src="movie.mp4" type="video/mp4">
            <source src="movie.ogg" type="video/ogg">Your browser does not support the video tag.
        </video>
      </div>
    </div>
    <div class="socialinks">
      <div>
        <img src="images/fb.png" alt="f" style="width: 29%;">Facebook
      </div>
      <div class="slinks">
        <img src="images/tw.png" alt="t">Twitter
      </div>
      <div class="slinks">
        <img src="images/go.png" alt="g">Google+
      </div>
    </div>
  </div>
</div>

Everything looks good, but Media part isn't coming properly. How can I fix it? JSFiddle link is given here.

via Chebli Mohamed