css - 以相反的顺序重新排列列

Question

我有一个 flexbox 中的 flex 元素列表。元素的顺序很重要，为了可访问性，元素需要以正确的顺序显示在 dom 中。

[[itema][itemb][itemc]]

当 flexbox 缩小时，我希望元素以相反的顺序包装，例如意达先包装，等等。有没有办法让意达先包装？谢谢!

编辑:

这是代码

<div class="flex">
    <div class="container">
        <div class="item">item1</div>
        <div class="item orange">item2</div>
        <div class="item blue">item3</div>
    </div>
    <div class="last-item green">menu</div>
</div>

.flex {
    display: flex;
    background-color: yellow;
    height: 80px;
    overflow: hidden;
    color: #fff;
}

.container {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.item {
    flex: 0 0 auto;
    background-color: red;
    height: 80px;
    padding: 0 40px;
}

.last-item {
    width: 40px;
    flex: 0 0 auto;
    height: 80px;
}

JSFiddle

除了我希望第一个元素先换行外，所有行为都符合要求。有任何想法吗？谢谢!

Answer 1

您可以使用 flex-direction: column-reverse 来获得您的解决方案。

@media (max-width: 768px) {
  .flex-box {
    display: flex;
    flex-direction: column-reverse;
  }
}
.first,
.second,
.third {
  display: inline-block;
}

<div class="flex-box">
  <div class="first">
    <p>First Box</p>
    <img src="http://placehold.it/300x300" />
  </div>
  <div class="second">
    <p>Second Box</p>
    <img src="http://placehold.it/300x300" />
  </div>
  <div class="third">
    <p>Third Box</p>
    <img src="http://placehold.it/300x300" />
  </div>
</div>

JSfiddle Demo