Rails4 iphone5s上でBootstrap3のデザインがブラウザと異なる

herokuでデプロイ後にiphone5sのsafariで確認したところ
レスポンシブデザインのxsにならず、smのデザインになってしまいます。

<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">

PCのsafariでブラウザサイズを可変した場合は正しく動いています。
どうしたら正しくxsで表示させることができるでしょうか

application.css

 *= require_tree .
 *= require 'vendor/bootstrap.min'
 *= require 'flat-ui'
 *= require 'bootstrap-social'
 *= require 'bootstrap-datetimepicker'
 *= require 'masonry/basic'
 *= require 'masonry/centered'
 *= require 'masonry/fluid'
 *= require 'masonry/gutters'
 *= require 'masonry/infinitescroll'
 *= require 'masonry/right-to-left'
 *= require 'masonry/transitions'

 *= require_self
 */



 body { padding-top: 70px; }
      footer { margin-top: 100px; }
      table, td, th { vertical-align: middle; border: none; }
      th { border-bottom: 1px solid #DDD; }



 .carousel-control.left, .carousel-control.right {
      background-image: none
 }



 /*
 Masonry
 */
 .wrapper {
      width: 95%;
      margin: 3em auto;
 }

 .masonry {
      margin: 1.5em 0;
      padding: 0;
      -moz-column-gap: 1.5em;
      -webkit-column-gap: 1.5em;
      column-gap: 1.5em;

 }

 .item {
      display: inline-block;
      background: #fff;

      margin: 0 0 1.5em; /*0 0 1.5em*/
      border-radius: 4px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-shadow: 4px 4px 4px 0 #8b8b8b;
  }

 .menu {

      margin: 0 0 1.5em; /*0 0 1.5em*/
 }

 .text {
      display: inline-block;
      background: #fbfcfb;
      padding: 7px;  /*1em;*/
      margin: 0 0 1.5em; /*0 0 1.5em*/
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-shadow: 4px 4px 4px 0 #8b8b8b;
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
 }



 /*==========  Mobile First Method  ==========*/

 /* Custom, iPhone Retina */
 @media only screen and (min-width : 320px) {
     .masonry {
         -moz-column-count: 2;
         -webkit-column-count: 2;
         column-count: 2;
     }
 }

 /* Extra Small Devices, Phones */
 @media only screen and (min-width : 480px) {
     .masonry {
         -moz-column-count: 2;
         -webkit-column-count: 2;
         column-count: 2;
     }
 }

 /* Small Devices, Tablets */
 @media only screen and (min-width : 768px) {
     .masonry {
         -moz-column-count: 3;
         -webkit-column-count: 3;
         column-count: 3;
     }
 }

 /* Medium Devices, Desktops */
 @media only screen and (min-width : 992px) {
     .masonry {
         -moz-column-count: 4;
         -webkit-column-count: 4;
         column-count: 4;
     }
 }

 /* Large Devices, Wide Screens */
 @media only screen and (min-width : 1200px) {
     .masonry {
         -moz-column-count: 4;
         -webkit-column-count: 4;
         column-count: 4;
     }
 }




 img{
     max-width: 100%;
     height: auto;
     width /***/:auto;
     border-radius: 4px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
 }

 body {
     background-color: #fbfcfb;
 }