Bootstrap 3 Div 订购桌面设备与移动设备

Question

希望这张图片能准确解释我想要完成的事情：

由于蓝色块代表一个简单的列表，我认为只输出块两次可能更容易，然后应用 "desktop-only" 和 "mobile-only" class，然后使用它class 来指示可见性，但我很想知道上述是否可以通过 Bootstrap 3 的纯 HTML/CSS 开箱即用？

Answer 1

这应该有效：

<div class="row">
    <div class="col-md-4">First</div>
    <div class="col-md-8" id="big">Big</div>
    <div class="col-md-4">Second</div>
</div>

和CSS：

@media (min-width: 769px) {
    #big {
        float: right;
    }
}

这里有一个例子：http://jsfiddle.net/8r4g20cr/1/

Answer 2

我不确定是否可行，但根据您的布局，您需要类似的内容：

<div class="row">
  <div class="col-md-4">
    <div class="marron"></div>
    <div class="blue"></div>
  </div>
<div class="col-md-8">
  <div class="green"></div>
</div>
</div>

当您调整屏幕大小时，div 行将有序堆叠。我不认为我可以为移动设备重新订购它。请继续关注其他意见。

Bootstrap 3 Div 订购桌面设备与移动设备

Bootstrap 3 Div Ordering Desktop vs Mobile

html

css

twitter-bootstrap-3