Cannot get Bootstrap Column to Stack Horizontal

Question

I am probably not using columns very well or overdoing this but I want my ad to show to the right of the video container / column.

I also don't know if I should be breaking the title out into its own row and then put the video and ad in its own row with maybe 2 columns?, and finally the last add that is horizontal in its own row and column. Or if I should just be working with divs inside ONE row, several bootstrap columns.

Here is how it looks and an arrow pointing to where I want the first ad container to live:

The code:

<div class="col-sm-9">
    <div class="row well">
        <div class="col-sm-12 well">
            <div class="media">
                <p><h3><%= string.Format( "#{0} - {1}", ViewData.Model.EpisodeNumber, ViewData.Model.EpisodeName ) %></h3></p>
                <div class="media-body makeVideoIntrinsic" >
                    <p>
                        <video id="<%=ViewData.Model.Name%>" class="video-js vjs-default-skin"
                            controls preload="auto" width="100%" height="100%"
                            poster="../../images/thumb_placeholder_Large.png"
                            data-setup='{"autoplay": false, "preload": "auto"}'>
                            <source src=<% = ViewData.Model.FileName %> type='video/mp4' />
                        </video> 
                    </p>
                </div>
            </div>
        </div>
        <div class="hidden-xs col-sm-2 well">
            <div class="media">
                <div class="media-body">
                    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                    <!-- 160x600 -->
                    <ins class="adsbygoogle"
                            style="display:inline-block;width:160px;height:600px"
                            data-ad-client="xxxxx"
                            data-ad-slot="xxxx"></ins>
                    <script>
                        (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="hidden-xs col-sm-12 well">
                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- 970x90 - Horizontal -->
                <ins class="adsbygoogle"
                        style="display:inline-block;width:970px;height:90px"
                        data-ad-client="ca-pub-xxxxx"
                        data-ad-slot="xxxxx"></ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>   
            </div>
        </div>
    </div>
</div>

Answer 1

used Bootstraps Responsive Video Embed Component and Grid Layout.

.one {
  background-color: blue !important;
}
.two {
  background-color: pink !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div class="col-lg-12">
  <div class="row well">
    <div class="col-lg-8 well one">
      <div class="media">
        <h3></h3>
        <div class="embed-responsive embed-responsive-16by9 media-body makeVideoIntrinsic">

          <video id="<%=ViewData.Model.Name%>" class="embed-responsive-item video-js vjs-default-skin" controls preload="auto" width="100%" height="100%" poster="../../images/thumb_placeholder_Large.png" data-setup='{"autoplay": false, "preload": "auto"}'>
            <source src=<%=V iewData.Model.FileName %>type='video/mp4' />
          </video>
        </div>
      </div>
    </div>
    <div class="hidden-xs col-lg-4 well two">
      <div class="media">
        <div class="media-body">
          <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
          <!-- 160x600 -->
          <ins class="adsbygoogle" style="display:inline-block;width:160px;height:600px" data-ad-client="xxxxx" data-ad-slot="xxxx"></ins>
          <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
          </script>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="hidden-xs col-sm-12 well">
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <!-- 970x90 - Horizontal -->
        <ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-xxxxx" data-ad-slot="xxxxx"></ins>
        <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
      </div>
    </div>
  </div>
</div>

I know that is not an embedded video but nevertheless i have used it on the video element.