Bootstrap Nested Columns Utilizing Push/Pull - html

Question

I'm coding a page that uses nested bootstrap columns. I am using push/pull to have the columns switch places on mobile, and it's working great. However, on desktop I've got some odd spacing issues. The nested columns are offset to the right of the parent column.
I've set up a fiddle that shows this behavior. In this example, col-md-9 is the parent div. I've given it a gold background to show the behavior. When you resize the output, the nested divs flow into place as expected. Any insight to this issue would be greatly appreciated.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-9" style="background: gold;">
<div class="row">
<!-- Large Video -->
<div class="col-xs-12 col-md-8 col-md-push-8" id="lgXbtvA">
<script src="http://cdnapi.kaltura.com/p/1982211/sp/198221100/embedIframeJs/uiconf_id/40685101/partner_id/1982211"></script>
<!-- Outer div defines maximum space the player can take -->
<div style="width: 100%;display: inline-block;position: relative;">
<!-- inner pusher div defines aspect ratio: in this case 16:9 ~ 56.25% -->
<div id="dummy" class="vignette" style="margin-top: 56.25%;"></div>
<!-- the player embed target, set to take up available absolute space -->
<div id="kaltura_player_1507831819" style="position:absolute;top:0;left:0;left: 0;right: 0;bottom:0;border:solid thin black;">
</div>
</div>
<h1>Large Headline</h1>
<div class="g citation">October 4, 2017 </div>
<p>Text text text text text</p>
</div>
<!--Videos Small -->
<div class="col-xs-12 col-md-4 col-md-pull-4 e" style="background: red; padding: 0;">
<a href="#" class="c">
<div class="artblock">
<img src="images/650.jpg" alt="" />
<div class="g">September 29, 2017</div>
<div>Saturday Stakes Preview Show</div>
</div>
</a>
<a href="#" class="c">
<div class="artblock">
<img src="images/xpress.jpg" alt="" />
<div class="g">September 28, 2017</div>
<div>Breeders' Cup Xpress</div>
</div>
</a>
</div>
</div>
</div>
Edit: The columns appear in the proper order on the desktop view, they are just offset for reasons I can't explain.

Answer 1

When you used pull and push class in bootstrap used alternate column for that So that you need to used:
col-xs-8 col-md-8 col-md-push-4 instead of col-xs-12 col-md-8 col-md-push-8
and
col-xs-4 col-md-4 col-md-pull-8 instead of col-xs-12 col-md-4 col-md-pull-4
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-9" style="background: gold;">
<div class="row">
<!-- Large Video -->
<div class="col-xs-8 col-md-8 col-md-push-4" id="lgXbtvA">
<script src="http://"></script>
<!-- Outer div defines maximum space the player can take -->
<div style="width: 100%;display: inline-block;position: relative;">
<!-- inner pusher div defines aspect ratio: in this case 16:9 ~ 56.25% -->
<div id="dummy" class="vignette" style="margin-top: 56.25%;"></div>
<!-- the player embed target, set to take up available absolute space -->
<div id="player" style="position:absolute;top:0;left:0;left: 0;right: 0;bottom:0;border:solid thin black;">
</div>
</div>
<h1>Large Headline</h1>
<div class="g citation">October 4, 2017 </div>
<p>Text text text text text text </p>
</div>
<!--Videos Small -->
<div class="col-xs-4 col-md-4 col-md-pull-8" style="background: red; padding: 0;">
<a href="#" class="c">
<div class="artblock">
<img src="images/650.jpg" alt="">
<div class="g">September 29, 2017</div>
<div>Saturday Stakes Preview Show</div>
</div>
</a>
<a href="#" class="c">
<div class="artblock">
<img src="images/xpress.jpg" alt="">
<div class="g">September 28, 2017</div>
<div>Breeders' Cup Xpress</div>
</div>
</a>
</div>
</div>
</div>
Update Demo Link

Answer 2

Your large video should be
class="col-xs-12 col-md-8 col-md-push-4"
and your small video should be
class="col-xs-12 col-md-4 col-md-pull-8"
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-9" style="background: gold;">
<div class="row">
<!-- Large Video -->
<div class="col-xs-12 col-md-8 col-md-push-4" id="lgXbtvA">
<script src="http://"></script>
<!-- Outer div defines maximum space the player can take -->
<div style="width: 100%;display: inline-block;position: relative;">
<!-- inner pusher div defines aspect ratio: in this case 16:9 ~ 56.25% -->
<div id="dummy" class="vignette" style="margin-top: 56.25%;"></div>
<!-- the player embed target, set to take up available absolute space -->
<div id="player" style="position:absolute;top:0;left:0;left: 0;right: 0;bottom:0;border:solid thin black;">
</div>
</div>
<h1>Large Headline</h1>
<div class="g citation">October 4, 2017 </div>
<p>Text text text text text text </p>
</div>
<!--Videos Small -->
<div class="col-xs-12 col-md-4 col-md-pull-8" style="background: red; padding: 0;">
<a href="#" class="c">
<div class="artblock">
<img src="images/650.jpg" alt="">
<div class="g">September 29, 2017</div>
<div>Saturday Stakes Preview Show</div>
</div>
</a>
<a href="#" class="c">
<div class="artblock">
<img src="images/xpress.jpg" alt="">
<div class="g">September 28, 2017</div>
<div>Breeders' Cup Xpress</div>
</div>
</a>
</div>
</div>
</div>