Bootstrap Pills unclickable on small screens - html

Question

I can't seem to get my pills to work on a small screen. They can tab content fine on a normal screen, but once I make the screen small, the pills are unclickable.
I don't know what the problem is.
Also if I have only the pills, then it tabs but once it's in the container, then it doesn't tab.
<div class="container-fluid">
<div class="row" style="margin-top: 1em; border: 2px dashed lightgreen">
<div class="col-md-8">
<div class="row">
<div class="col-md-3" style="text-align: center; border: 2px dotted purple"><img src="/images/video-thumbnails/ice.jpg" class="songThumbnail">
</div>
<div class="col-md-5" style="border: 2px dotted purple">
TEXT TEXT TEXT</div>
<div class="col-md-4 col-xs-12">
TEXT TEXT TEXT
</div>
</div>
<div class="row">
<div class="col-md-12" style="margin: 1em;">
<img src="/images/icons/piapro.png" class="favicon"> ice - オケ <span class="whisper">(karaoke)</span>
</div></div>
</div><div class="col-md-4" style="border: 1px solid red; float: right;">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#niconico">Niconico</a></li>
<li><a data-toggle="pill" href="#youtube">YouTube</a></li>
<li><a data-toggle="pill" href="#soundcloud">SoundCloud</a></li>
</ul>
<div class="tab-content" style="text-align:center;">
<div id="niconico" class="tab-pane fade in active">
<p><div class="embed-responsive embed-responsive-16by9" ><script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/sm28116292"></script><noscript>【ニコニコ動画】【Faeri】ice【歌ってみた】</noscript>
</div></p>
</div>
<div id="youtube" class="tab-pane fade">
<br>
<strong>日本語 | Japanese</strong><br>
<br>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/JOd9cunyWAg"></iframe>
</div>
<br>
<strong>英語 | English</strong><br>
<br>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/mCkHvttcSoE"></iframe>
</div>
</div>
<div id="soundcloud" class="tab-pane fade">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="100%" height="600" scrolling="yes" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/244661025&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
</div>
</div>
<br>
<p>TEXT TEXT TEXT</p>
</div></div>

Answer 1

After re-implementing the page again and fiddling around with the columns/rows, I realized that it was a case of z-index. Oops. It wasn't obvious until I changed the bg color of the divs.
The final code I ended up with for the media sidebar was this:
<div class="col-md-4 col-lg-4 pull-right" style="background-color: #99CCFF; border: 3px dotted red; display: block; z-index: 1; margin-top: 1em;">
<!-- All that jazz and other stuff -->
</div>
And it seems to work like I wanted to. Hopefully it won't hiccup on me in the future. #NathanielFlick, apologies for not being more helpful in providing the code, but I really appreciate you taking the time to respond back to me. Thanks!