Flexbox: 不通过嵌套来包裹元素

Question

我有一个flexbox布局，该布局在移动设备上按照特定顺序显示，在台式机和平板电脑上则可以重新排序。 所有元素都放在一个容器中以便重新排序。

移动设备上的顺序如下： 侧边栏1 -> 图片1 内容 侧边栏1 -> 图片2 侧边栏2 -> 图片3

在台式机上，我希望出现以下顺序： 侧边栏1 -> 图片1 -> 图片2 内容 侧边栏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>

让我通过这个代码演示问题：https://jsfiddle.net/wd8obb0k/。感谢您的帮助！

- oppenheimer

---

使用媒体查询 - kukkuz

媒体查询本身并不是问题，谢谢。问题在于我在jsfiddle上展示的包装问题。 - oppenheimer

Flexbox不是那样工作的。请参考重复内容以获取解释和替代方案。 - Michael Benjamin

@Michael_B 我认为这个链接的重复问题和这个问题之间存在差异。在另一个问题中，使用col-wrap是可以的，因为两个宽度是相同的。但在这个问题中，情况并非如此。 - vals

col-wrap是一种替代方案。关键在于flex项目不能在同一行下面换行。项目必须换到新的行。 - Michael Benjamin

是的，你说得对，但我相信在这种特殊情况下，所需的布局可以被“黑客攻击”。 - vals

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>

- vals

---

这个技巧非常酷，对于正方形图像确实有效。虽然我的例子当然是抽象的。在现实世界中，内容不仅仅是图像，高度也是未知的。再次感谢您的关注！我选择了一个“恶劣”的js解决方法。 - oppenheimer