如何在较小的屏幕上更改div的顺序？

Question

当屏幕尺寸小于480px时，我需要重新排序div。

我不想使用，position: absolute因为绿色区域的高度可能会因文字数量而异。

我需要将小屏幕顺序设置为红色，绿色，红色，绿色，红色，绿色（每个红色都位于紧邻的绿色之上，宽度为100％）。

任何的想法？非常感谢

*, html, body {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
}

.full_half {
    display: inline-block;
    width: 50%;
    background-color: green;
    float: left;
    min-height: 100px;
}

.pic {
    background-color: red;
    height: 100px;
}

.text {
    box-sizing: border-box;
    padding: 20px 120px;
}

@media screen and (max-width: 480px) {
    .full_half {
      width: 100%;
    }
    
    .text{
     padding: 0 0 !important;
    }
}

<div class="container">
    <div class="full_half pic"></div>
    <div class="full_half text">test</div>
</div>
<div class="container">
    <div class="full_half text">test</div>
    <div class="full_half pic"></div>
</div>
<div class="container">
    <div class="full_half pic"></div>
    <div class="full_half text">
        dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdf<br />
        dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdf<br />
        dfdfdfdfdfdffdfdfdfdfdfdfdfdfdfdf<br />
    </div>
</div>

解决了：

我终于设法通过将flexbox应用于容器来更改顺序（仅当宽度小于480px时）。

CSS更改：

@media screen and (max-width: 480px) {
    .container {
      flex-direction: column;
    }
    .pic {
      order: 1;
    }

    .text{
     order: 2;
    }
}

http://jsfiddle.net/vquf7z7b/

Answer 1

使用CSS Flexbox，您可以使用order属性控制元素的视觉顺序，以及使用属性控制div 的 x/y 方向flex-direction。

以下是对您的代码进行的一些简单调整，以使您的布局正常工作：

CSS

.container {
     display: flex; /* NEW */
    /* width: 100%; */
    /* display: inline-block; */
    /* box-sizing: border-box; */
}

@media screen and (max-width: 480px) {
    .full_half {  width: 100%; }
    .text      {  padding: 0 0 !important; }
    .container { flex-direction: column; }         /* NEW */
    .container:nth-child(2) > .pic { order: -1; }  /* NEW */
}

现在当屏幕尺寸小于 480px 时，div 被堆叠在一个列中，顺序是红色，绿色，红色，绿色，红色，绿色。

.container {
     display: flex; /* NEW */
    /* width: 100%; */
    /* display: inline-block; */
    /* box-sizing: border-box; */
}

@media screen and (max-width: 480px) {
    .full_half {  width: 100%; }
    .text      {  padding: 0 0 !important; }
    .container { flex-direction: column; }         /* NEW */
    .container:nth-child(2) > .pic { order: -1; }  /* NEW */
}

*,
html,
body {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
}
.full_half {
  display: inline-block;
  width: 50%;
  background-color: green;
  float: left;
  min-height: 100px;
}
.pic {
  background-color: red;
  height: 100px;
}
.text {
  box-sizing: border-box;
  padding: 20px 120px;
}
@media screen and (max-width: 480px) {
  .full_half {
    width: 100%;
  }
  .text {
    padding: 0 0 !important;
  }
  .container {
    flex-direction: column;
  }
  .container:nth-child(2) > .pic {
    order: -1;
  }
}

修改后的小提琴

在上面的例子中，flex 容器 ( .container) 的子元素排列成一行，这是 flexbox ( flex-direction: row)的默认布局。

每个子元素都是order: 0默认的。通过给予div与.pic类中的第二.container一个order的-1值，它就会被位于其兄弟之前（div与.text为0的值）。我们也可以给出的第一个兄弟的值为1，因此后移动它div有.pic。了解有关该order物业的更多信息。

通过将 的值 flex-direction从其默认值 ( row) 更改为column，div 会堆叠在一个列中。了解有关该flex-direction物业的更多信息。

浏览器支持： 除 IE < 10 外，所有主流浏览器都支持Flexbox 。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要供应商前缀。要快速添加所需的所有前缀，请使用Autoprefixer。此答案中的更多详细信息。