Question

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

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

将视口改为320需要右边的div出现在第一个左边的div下面，这可能是??????

Answer 1

是肯定的。只需在相关媒体查询上使用弹性框设置，如下所示，框将显示相反。

<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

Answer 2

有可能并广泛使用。看看这个移动第一种方法：

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

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

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

包装浮动DIVS响应视图

2 个答案: