Question

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

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

我需要小屏幕顺序为红色，绿色，红色，绿色，红色，绿色（每个红色位于直接绿色的顶部，宽度为100％）。

有什么想法吗？非常感谢

＆＃13;

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

＆＃13;

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

＆＃13;

解决：

我终于设法通过将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属性的元素的视觉顺序以及具有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 */
}

现在，当屏幕尺寸小于480px时，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。通过在div的第.pic和.container值中为order类提供div，它会在其兄弟.text之前定位div 1}}，值为0）。我们也可以给第一个兄弟的值为1，从而在.pic之后用flex-direction移动它。 Learn more about the order property.

通过将row的值从默认值column更改为{{1}}，div会在一列中叠加。 Learn more about the flex-direction property.

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

中的更多详细信息

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

1 个答案: