HTML Bootstrap - Banner Image + Nav

I'm currently using Bootstrap 3 to try to create a website. I'd like the top to have a header as in this example. The boxes are just there to give you an example of how my grid is laid out right now.

In words, what I need it:

• A background image for the entire thing (this is the color part in the image, the yellow and the blue is all one image)
• An empty portion on the left where my Banner will be (this will be part of the yellow & blue image)
• Two navbars on the right (top will be social media links, bottom will be navigation links). I want them to stack on top of each other, and drop below the left banner at col-md.

So far, I've been trying to do this with a grid layout, but it isn't working:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div class="row" style="background: url(images/header.jpg) no-repeat; color:#fff; height:100px;">
    <div class="col-lg-6" style="border-color: #F0F; border: dashed;">
      <img src="images/empty.gif" height="100" border="0">
    </div>
    <div class="col-lg-6" style="border-color: #F0F; border: dotted;">

      <div class="navbar navbar-default navbar-static-top">
        <div class="navbar-inner">
          <ul class="nav">
            <li><a href="#">FB</a></li>
            <li><a href="#">Tumblr</a></li>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">You Tube</a></li>
          </ul>
        </div>
      </div>

      <div class="navbar navbar-default">
        <div class="navbar-inner">
          <ul class="nav">
            <li class="active"><a href="#" id="link">Home</a></li>
            <li><a href="#" id="link">About</a></li>
            <li><a href="#" id="link">Characters</a></li>
            <li><a href="#" id="link">Archive</a></li>
            <li><a href="#" id="link">Gallery</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</header> 

The problems are many, but the main one I'm having issues with is Getting the two navbars to stack in a column while keeping the left side empty. When responsive, the two navbars should drop below the empty area. Other issues aside, that's what I need help with.

Is using the grid the best way to do this, or is there a better way?

Current status (after altering my code based on answer by @Marc Barbeau ): Notice that the two navbars do NOT drop down below the banner, AND the bottom navbar doesn't move below the first.

Col-lg

Col-sm

How I assume it should look in small view Of course, the rest of the menu and the cat picture would be below - off screen.