html - 我一行有 3 个 div，如何让中间的 div 排在第一位，第一个 div 排在第二个，第三个 div 在移动设备中排在最后？

Question

我在一行中有 3 个 div，如何让中间的 div 排在第一位，第一个 div 在第二个和第三个 div 在移动设备中排在最后？

<div class="first">hello first</div>
<div class="middle">hello Middle</div>
<div class="last">hello last</div>

.first {float:left; width:33%;}

.middle {float:left; width:33%;}

.last {float:left; width:33%;}

Answer 1

如果您根据问题使用 Bootstrap，还有一种方法可以使用 Bootstrap 的拉/推类在每个断点的基础上指定 div 顺序。假设您设置了正确的顺序，因为它应该在移动设备上，首先:

<div class="row">
  <div class="middle col-md-4 col-md-push-4 col-sm-4">hello middle</div>
  <div class="first col-md-4 col-sm-4 col-md-pull-4 ">hello first</div>
  <div class="last col-md-4 col-sm-4">hello last</div>
</div>

http://jsfiddle.net/ximes/dw8n36jj/

参见:http://getbootstrap.com/css/#grid-column-ordering获取更多信息/示例。