Bootstrap 4 beta两列网格在移动设备中相互叠加

Question

我似乎无法弄清楚如何在较小的屏幕视图中将两列网格重新堆叠到一列中。目前我的网格尺寸下降，当它达到约556px宽屏幕时，视频堆叠在一起，这就是我想要的。一旦屏幕尺寸小于约476px宽，列中的视频就会并排调整为瘦小的列。图像看起来像
这是我的代码，我真的想坚持使用Bootstrap css，如果可能的话，不要添加自定义内容。

＆＃13;

＆＃13;

<div class="container"> 
<h1>References</h1>
<div class="row mb-2">
<div class="col-sm-6">
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/aaINOaWt938?rel=0?"></iframe>
<p>Click Above To View Testimonial Video!</p>
</div>
</div>
<div class="col-sm-6">
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/e6UWqeLaMm4?rel=0?"></iframe>
<p>Click Above To View Peter In Seminar Action!</p>
</div></div></div>
<div class="clearfix visible-sm"></div>

＆＃13;

＆＃13;

＆＃13;