需要能够在移动设备上交换网格

Question

最好用我相信的照片解释。 My website.

我已经为我的网站设置了托管服务，因此更容易看到。

问题：由于我设置的方式在移动设备上时会导致图片堆叠错误，如下所示。

问题：当屏幕小于X像素时，有没有办法可以切换这两个col-md 6？

Answer 1

您的问题将与Order of div on mobile，Possible to achieve this Mobile/Desktop layout using Bootstrap? (or other grid)或Article push/pull alignment using bootstrap 3重复，因此我也会投票支持此事。

在你的情况下，你基本上这样做：

<强>的CSS：

.floatright {浮动：右;} @media（max-width：767px）{。flloatright {float：none;}}

注意使用medium（col-md- ）网格时，请更改767到991。在你的情况下，我应该更喜欢小网格（col-sm - ），因为默认情况下grid-float-breakpoint也设置为767px（参见：Bootstrap 3 Navbar Collapse）

<强> HTML：

<div class="container"> 
    <div class="row">
        <div class="col-sm-6">text</div>
        <div class="col-sm-6">img</div>
    </div>  
    <div class="row">
        <div class="col-sm-6 floatright">text</div>
        <div class="col-sm-6">img</div>
    </div>
    <div class="row">
        <div class="col-sm-6">text</div>
        <div class="col-sm-6">img</div>
    </div>  
</div>

您还提到“106行col-md-6不在行div中”。你是对的，我在这里错了（错字）。上面的代码是正确的，列包含在行中。 文档http://getbootstrap.com/css/#grid-example-mixed-complete总共显示其不需要的列。这不是这里的情况，但上述内容也适用于一行中的所有列，如：

<div class="container"> 
    <div class="row">
        <div class="col-sm-6">text</div>
        <div class="col-sm-6">img</div>

        <div class="col-sm-6 floatright">text</div>
        <div class="col-sm-6">img</div>

        <div class="col-sm-6">text</div>
        <div class="col-sm-6">img</div>
    </div>  
</div>