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

【问题标题】：How to change order of divs on smaller screens?如何在小屏幕上更改 div 的顺序？
【发布时间】：2015-11-17 04:11:18
【问题描述】：

当屏幕尺寸小于 480 像素时，我需要重新排序 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 应用于容器来更改顺序（仅当宽度小于 480 像素时）。

css 更改：

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

    .text{
     order: 2;
    }
}

http://jsfiddle.net/vquf7z7b/

【问题讨论】：

标签： html css responsive-design flexbox

【解决方案1】：

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

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

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 */
}

现在，当屏幕尺寸小于 480 像素时，div 会堆叠在单列中，顺序为红、绿、红、绿、红、绿。

*,
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;
  }
}

<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>

revised fiddle

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

每个子元素默认为order: 0。通过在第二个.container 中为div 和.pic 类赋予-1 的order 值，它被定位在其兄弟之前（div 和.text 的值为0）。我们也可以将第一个兄弟值设为 1，从而将其移动到 div 之后和 .pic。 Learn more about the order property.

通过将 flex-direction 的值从其默认值 (row) 更改为 column，div 堆叠在一个列中。 Learn more about the flex-direction property.

浏览器支持： 所有主流浏览器都支持 Flexbox，except IE < 10。一些最新的浏览器版本，例如 Safari 8 和 IE10，需要vendor prefixes。要快速添加所需的所有前缀，请使用Autoprefixer。更多详情this answer。

【讨论】：