Question

我有两个浮动<div>的{{1}}和.a。

两个.b都浮动到左侧，因此它们都水平对齐，每个都有<div>宽度。

但是在小屏幕上，我希望50%两个<div>与全宽度垂直对齐，但第二个<div> .b必须首先出现<div> {{1} }必须显示在.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;}
}

Answer 1

<强> fiddle demo

反转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;}
}

Answer 2

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

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 Demo

flexbox浏览器支持@ caniuse

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等框架。他们已经以比我提出的方式更广泛和更灵活的方式提供此功能。

根据屏幕大小更改元素的顺序

3 个答案:

JSFiddle Demo