根据屏幕尺寸改变元素顺序

Question

我有两个浮动的 <div>，分别为 .a 和 .b。

这两个 <div> 都向左浮动，以便它们都水平对齐，每个占据 50% 的宽度。

但在小屏幕上，我希望这两个 <div> 垂直对齐，并且宽度为满屏，但第二个 <div> .b 必须先出现，而第一个 <div> .a 必须出现在 <div> .b 下面。

此外，由于它们的内容是动态的，我不能设置两个 <div> 的高度。

以下是示例代码：

.a{width:50%; float:left;background-color:#CCCCCC}
.b{width:50%; float:left; background-color:#FFC;}

@media only screen and (min-width: 320px) and (max-width: 480px) {
.a{width:100%; float:left; background-color:#CCCCCC}
.b{width:100%; float:left; background-color:#FFC;}
}

<div class="a">This is first div</div>
<div class="b">this is Second div</div>

- Joginder

Answer 1

演示链接

倒置HTML顺序：

<div class="b">this is Second div</div>
<div class="a">This is first div</div>

初始时使用float:right:

.a{width:50%; float:right; background:#ccc}
.b{width:50%; float:right; background:#ffc;}

@media only screen and (min-width: 320px) and (max-width: 480px) {
  .a{width:100%; float:left;}
  .b{width:100%; float:left;}
}

- Roko C. Buljan

---

感谢回复，但是HTML结构的更改不可能，因为这是一个响应式网站。 - Joginder

@Joginder，很抱歉要说，但HTML元素顺序和响应性之间没有任何关系。 :| - Roko C. Buljan

Answer 2

你可以使用CSS3 flexbox模块的order属性，如下所示：

HTML：

<div class="flex-parent">
  <div class="flex-child a">This is first div</div>
  <div class="flex-child b">this is Second div</div>
</div>

CSS：

.flex-parent {
  display:flex;
  flex-wrap: wrap;
  width:100%;
}
.flex-child {
  flex:1;
}
.a {
  background-color: #CCCCCC
}
.b {
  background-color: #FFC;
}
@media only screen and (min-width: 320px) and (max-width: 480px) {
  .flex-child {
    flex-basis:100%;
  }
  .a {
    order:2;
  }
  .b {
    order:1;
  }
}

JSFiddle演示

flexbox浏览器支持@ caniuse

- T J

Answer 3

好的，我们开始吧。您希望它们在大分辨率下左对齐，但在移动分辨率下反转。

移动版本：让我们采用移动优先的方法。这意味着我们将支持移动样式作为默认样式，并在媒体查询中包含大屏幕样式。这似乎更简单、更合理，因为在这种情况下，您的div可以是静态的。然后，让第二个div先出现就更有意义了。

<div class="section">Second div</div>
<div class="section">First div</div>

那么，样式方面就不需要太多了，只需为移动版本编写简单的常规css。主要是这个：

.section {
    background-color: #f2f2f2;
}

这里有一个例子：http://jsfiddle.net/arthurcamara/3yv2urkm/

大屏幕版本：我还自由地将代码进行了更语义化的处理。因此，我给div添加了独立的类lg-right和lg-left：

<div class="section lg-right">Text, second div</div>
<div class="section lg-left">Text, first div </div>

现在是添加媒体查询的时候了。

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

最终工作版本请点击此处查看：http://jsfiddle.net/arthurcamara/3yv2urkm/2/

此外，您可能想考虑使用像Foundation这样的框架。它们已经以比我提供的更广泛和灵活的方式提供了此功能。

- Arthur Camara