Bootstrap嵌套行无法在移动设备上运行

Question

当我在ripple Iphone5和Android Galaxy模拟器上运行时，以下代码会在右端生成更宽的嵌套行。嵌套行上的总列宽等于12，但第一个蚂蚁的最后一列的差异不同。如果我想保持相同的分布，如何解决这个问题。

<div class="container">
    <div class="row">
        <!--Loadsheet calcs  section-->
        <div class="col-xs-6" style="background-color: steelblue">
            <!--Loadsheet Header-->
            <div class="row" style="background-color:greenyellow;">
                <div class="col-xs-4" style="background-color:navajowhite">4</div>
                <div class="col-xs-3" style="background-color:orange">3</div>
                <div class="col-xs-3" style="background-color:yellow">3 </div>
                <div class="col-xs-2" style="background-color:aqua">2</div>
            </div>
        </div>
        <!--Loadsheet Chart Section-->
        <div class="col-xs-6" background-color steelblue">
            <!--Loadsheet Header-->
            <div class="row" style="background-color:greenyellow;">
                <div class="col-xs-5" style="background-color:navajowhite">5</div>
                <div class="col-xs-3" style="background-color:orange">3</div>
                <div class="col-xs-3" style="background-color:yellow">3 </div>
                <div class="col-xs-1" style="background-color:aqua">1</div>
            </div>
        </div>
    </div>
</div>