包裹浮动 DIVS 响应视图答案

【问题标题】：Wrap floating DIVS Responsive view包裹浮动 DIVS 响应视图
【发布时间】：2013-08-09 04:49:27
【问题描述】：

我只是想知道我是否有这样的布局

<div class="container">
<div class="left"> Left </div>
<div class="right"> Right </div>
</div>

将视口更改为 320 需要先出现右 div 并在其下方显示左 div，这可能吗??????

【问题讨论】：

标签： css mobile web responsive-design

【解决方案1】：

是的。只需在相关媒体查询上使用 flex-box 设置，如下例所示，这些框将反转显示。

<html><head></head><body><div class="container" style="
    display: -webkit-flex;
">
  <div class="left" style="
    -webkit-flex-flow: column;
    background: lightgray;
"> Left </div>
  <div class="right" style="
    -webkit-flex-flow: column;
    background: yellow;
    -webkit-order: -1;
"> Right </div>
</div> 
</body></html>

原文来源：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

【讨论】：

好的，请查看此页面的来源：petercarrero.com/reverse.html（面向 webkit 的代码，但在 developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes 上提供了相同的跨浏览器解决方案）

【解决方案2】：

这是可能的并且被广泛使用。看看这种移动优先的方法：

<div class="container">
<div class="right"> Right </div>
<div class="left"> Left </div>
</div>

这将在移动设备上呈现在另一个框下方。现在我们使用 CSS 在更大的屏幕（320 像素以上）上重新排列它们：

@media only screen and (min-width : 481px) {
  .left { float: left; }
  .right { float: right; }
}

【讨论】：

OP 想要不改变 html 顺序。
这是移动设计的正确方法。 Javascript DOM 操作是另一种方法，但在移动设备上存在性能不佳的问题，不应使用。