在fancybox窗口中，Bootstrap列无法调整为小屏幕

Question

我有一个网站，可以在fancybox中打开一个html文档。 html有两个相等的列 - 所以我有两个<div class="col-sm-6"> div。这两个列在桌面和iPad纵向和横向上显示得相当不错 - 但由于某种原因，它不能在iphone上切换到单个列。它仍然在iphone上为横向和移植显示两列。

bootstrap列在我的主html上正常工作 - 但不在fancybox中打开的html上。任何想法为什么html不会在较小的屏幕上切换到单列。

Fancybox脚本

<script type = "text/javascript">
  $(function() {
    //    fancybox
    jQuery(".fancybox").fancybox({
      'type': 'iframe', // tell the script to create an iframe
    });
  });
</script>

HTML

<figure class="effect-jazz">
    <img src="hover/img/6.jpg" alt="img06"/>
        <figcaption>
            <h2>Song <span>List</span></h2>
            <p>View a comprehensive list of songs in Pauls current repertoire.</p>
            <a  class="fancybox fancybox.iframe" href="songlist.html"></a>
        </figcaption>           
</figure>