Trouble getting grid size to work on devices

Question

I am new to Bootstrap and I am having trouble trying to get my layout to work based on device resolution. I'm testing using Apple devices only right now, but when I open my page on an iPhone, I want my format to be XS and show my information in 2 columns. If the device is SM or larger, I want my information to show in 4 columns. With my sample below, my iPhone 5s shows the information in 4 columns (looking at display held vertically, long ways top/bottom), not 2. What am I doing wrong?

<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 -->

Sample in jsfiddle

Answer 1

This happens when the meta viewport is missing:

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