页面无法在Ipad bootstrap 3上正确显示

Question

我有以下HTML

 <div class="row col-xs-12 margin0">
    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="boxTop"></div>
        <div class="box" id="panel1" style="height:280px">
                <div class="row col-xs-12 margin0" >
                        <div class="col-md-6 col-xs-6">
                            <img src="/Content/Images/Lab/black_cherries.png" data-id="1" alt="black_cherries.png" data-name="blackcherry" />
                        </div>
                        <div class="col-md-6 col-xs-6">
                            <img src="/Content/Images/Lab/coconut.png" data-id="2" alt="coconut.png" data-name="coconut" />
                        </div>
                </div>
                <div class="clearfix"></div>
                <div class="marginBottom10 visible-xs-block"></div>
                <div class="row col-xs-12 margin0">
                        <div class="col-md-6 col-xs-6">
                            <img src="/Content/Images/Lab/mango.png" data-id="3" alt="mango.png" data-name="mango" />
                        </div>
                        <div class="col-md-6 col-xs-6">
                            <img src="/Content/Images/Lab/strawberries.png" data-id="4" alt="strawberries.png" data-name="strawberries" />
                        </div>
                </div>
                <div class="clearfix"></div>
                <div class="marginBottom10 visible-xs-block"></div>
        </div>
        <div class="boxBtm"></div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-1">
        <img src="/Content/Images/Lab/plus.png" />
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="boxTop"></div>
        <div class="box" id="panel2" style="height:280px">
                <div class="row col-xs-12 margin0">
                        <div class="col-md-6 col-xs-6">
                            <img src="/Content/Images/Lab/chocolate.png" data-id="1" alt="chocolate.png" data-name="chocolate" />
                        </div>
                        <div class="col-md-6 col-xs-6">
                            <img src="/Content/Images/Lab/cinnamon.png" data-id="2" alt="cinnamon.png" data-name="cinnamon" />
                        </div>
                </div>
                <div class="clearfix"></div>
                <div class="marginBottom10 visible-xs-block"></div>
                <div class="row col-xs-12 margin0">
                        <div class="col-md-6 col-xs-6">
                            <img src="/Content/Images/Lab/honey.png" data-id="3" alt="honey.png" data-name="honey" />
                        </div>
                        <div class="col-md-6 col-xs-6">
                            <img src="/Content/Images/Lab/vanilla.png" data-id="4" alt="vanilla.png" data-name="vanilla" />
                        </div>
                </div>
                <div class="clearfix"></div>
                <div class="marginBottom10 visible-xs-block"></div>
        </div>
        <div class="boxBtm"></div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-1">
        <img src="/Content/Images/Lab/equals.png" />
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="boxTop"></div>
        <div class="box" style="height:280px">
            <p style="font-family: Foco-Regular; display: none; text-transform: uppercase;" id="combinationHeader" class="text-center"></p>
            <img src="" width="260" height="222" alt="" id="combinationImage" class="displaynone">
        </div>
        <div class="boxBtm"></div>
    </div>
</div>

在Web浏览器中显示时如下所示

在移动设备和桌面设备上查看时，一切都很好，但是当我将浏览器最小化到ipad屏幕时，它会像这样呈现

理想情况下我希望它叠加，所以第一行是

• 第一行=面板+
• 第二行= Panel =
• 第三行=面板

对于自举主人来说可能很容易解决。我很有信心。

Answer 1

我在使用了firebug中的.col后，设法让它工作了

col-md-12 col-md-1

到plus和equals图像，它现在按预期显示。