Twitter bootstrap 3 无法在设备上使用网格大小

我是新的引导，我有困难，试图让我的布局工作的基础上设备的分辨率。我现在只在使用苹果设备进行测试，但当我在iPhone上打开我的页面时，我希望我的格式是XS，并在两列中显示我的信息。如果设备为SM或更大，我希望我的信息显示在4列中。在下面的示例中，我的iphone5s将信息显示在4列中（查看垂直放置的显示器，长距离的上/下），而不是2列。我做错了什么

<div class="panel panel-default">
    <div class="panel-heading"Panel Header</div>
    <div class="panel-body">
        <div class="row">
                <div class="col-xs-4 col-sm-2 text-right">First:</div>
                <div class="col-xs-8 col-sm-4 text-left">John</div>
                <div class="col-xs-4 col-sm-2 text-right">Home:</div>
                <div class="col-xs-8 col-sm-4 text-left">905-555-1111</div>
        </div>
        <div class="row">
                <div class="col-xs-4 col-sm-2 text-right">Last:</div>
                <div class="col-xs-8 col-sm-4 text-left">Smith</div>
                <div class="col-xs-4 col-sm-2 text-right">Work:</div>
                <div class="col-xs-8 col-sm-4 text-left">905-555-2222</div>
        </div>
    </div> <!-- panel body END -->
</div> <!-- panel END -->

---

元视口丢失时会发生这种情况：

<meta name="viewport" content="width=device-width, initial-scale=1">

除非我遗漏了一些东西，否则它看起来完全符合您的要求。我同意它看起来是正确的，但如果我使用iPhone 5s打开样本，它的宽度为640，应该是X列，但它的行为类似于sm列。