Empilhamento de Elementos

Boa Noite,

Pessoal estou montando um site de fotografia, tenho uma página que se chama vídeos onde eu estou listando os vídeo do banco de dados.Assim, acontece que estou com dificuldade de empilhar esses vídeos quando diminui o tamanho da tela, onde vem um vídeo a subir sobre o  outro. Peço desculpa se estiver criando tópico duplo, mas procurei e nada de conseguir resolver e no momento só resta isso para finalizar o trabalho.

<div class="container-fluid">
	<div class="container">
 <div id="gallery" class="row">
 <div class="col-12 col-xs-12">
 <h1>Vídeos</h1>
 </div>
 </div>
 <!--- Busca do Vídeo --->
 <?php
 require_once 'database/mysql.php';
 $db = new Mysql;
 $db->query( "select * from video order by video_id desc" )->fetchAll();
 if ( $db->rows >= 1 ):
 $videos = $db->data;
 ?>

 <div class="col-12 col-xs-12">
 <div class="row">
 <?
 foreach ( $videos as $video ):
 $v = ( object ) $video;
 ?>
 <div class="col-6 col-xs-6 box-video">

 <a href="http://www.youtube.com/embed/<?= $v->video_cod ?>?autoplay=1"
 class="various fancybox.iframe" url="<?= $v->video_cod ?>">
 <img src="http://img.youtube.com/vi/<?= $v->video_cod ?>/hqdefault.jpg">
 <span class="play"><img src="images/img-play.png"></span>
 <p style="margin-top:-20px; color:#fff;padding-left:10px;"><?= strip_tags($v->video_title) ?></p>
 </a>

 </div>
 <? endforeach; ?>
 <?
 endif;
 ?>

 </div>
 </div>
	</div>
</div>