html - Flexbox:在没有嵌套的情况下包装元素

Question

我有一个 flexbox 布局，它在移动设备上遵循特定顺序，应该在台式机/平板电脑上自行重新排序。所有元素都被放入一个包装器中，以便重新排序。

手机端顺序如下:
除了第一名
-> 图片 1
内容
除了第一名
-> 图片 2
除了第二
-> 图 3

在桌面上我想要:
除了第一名
-> 图片 1
-> 图片 2
内容
除了第二
-> 图 3

所以桌面上的问题是第二张图片应该环绕在第一张图片下面。无法在此处进行嵌套，因为它会在移动设备上抛出所需的顺序。

<div class="wrapper">

  <div class="left-first">
    <img src="http://lorempixel.com/g/200/200/">
  </div>

  <div class="content">
    [ ... ]
  </div>

  <div class="left-second">
    <img src="http://lorempixel.com/g/300/300/">
  </div>

  <div class="right">
    <img src="http://lorempixel.com/g/250/250/">
  </div>
</div>

让我用这个 fiddle 来说明问题: https://jsfiddle.net/wd8obb0k/

非常感谢您的帮助!

Answer 1

这是 flex 无法实现的要求。

但是您的情况可以通过一些技巧来处理。

我已经为你的左第二个元素添加了一些属性，依赖于 flex 基础是固定的，并且图像是正方形的:

.wrapper {
  display: flex;
  flex-flow: row wrap;
  background-color: pink;
}
img {
  width: 100%
}
.content {
  flex: 1 0 60%
}
.left-first,
.left-second,
.right {
  flex: 0 0 20%;
}
.left-first {
  order: 0;
}
.left-second {
  order: 1;
  margin-left: -20%;
  margin-bottom: 20%;
  transform: rotate(-90deg) translateX(-100%) rotate(90deg);
}
.content {
  order: 2
}
.right {
  order: 3
}

<div class="wrapper">

  <div class="left-first">
    <img src="http://lorempixel.com/g/200/200/">
  </div>

  <div class="content">
    <h3>H3 - Lorem ipsum Incididunt magna nostrud sint.</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <h3>H4 - Lorem ipsum Ad labore laborum.</h3>
    <p>
      Lorem ipsum Sit proident laboris id eu in Ut non laboris id mollit ut elit dolor velit est nisi magna adipisicing culpa et mollit do do tempor enim exercitation.
    </p>
    <h3>H4 - Lorem ipsum Ad labore laborum.</h3>
    <p>
      Lorem ipsum Sit proident laboris id eu in Ut non laboris id mollit ut elit dolor velit est nisi magna adipisicing culpa et mollit do do tempor enim exercitation.
    </p>
  </div>


  <div class="left-second">
    <img src="http://lorempixel.com/g/300/300/">
  </div>

  <div class="right">
    <img src="http://lorempixel.com/g/250/250/">
  </div>
</div>