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

Question

我相信最好用图片来解释。 我的网站。

我已经为我的网站设置了一个主机，这样更容易看到。

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

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

Answer 1

您的问题将与移动设备上的 div 顺序重复，是否可以使用 Bootstrap 实现此移动/桌面布局？（或其他网格）或使用引导程序 3 的文章推/拉对齐，所以我也会投票赞成关闭它。

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

CSS：

.floatright{float:right;} @media (max-width: 767px) { .floatright{float:none;} }

请注意，当您使用中 (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显示其不需要的列总和为 12。这里不是这种情况，但上述内容也适用于一行中的所有列喜欢：

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