javascript - 重新排序不是 sibling 的Divs

相关：Use CSS to reorder DIVs

就我而言，我的HTML看起来更像这样：

<div class="container">
    <div class="gallery">
        <div class="image-wrap"> stuff </div>
        <div class="thumbnails"> stuff </div>
    </div>
    <div class="info"> stuff </div>
</div>

我希望.thumbnails和.info在视觉上切换位置，但又不影响其他任何样式或位置。 .gallery中的所有html（和大多数css）都是由我无法编辑的插件生成的。

这是您可以假定的样式：

.thumbnails {
    width: 100%;
    height: 100px;
}

.info {
    width: 100%;
    min-height: 125px;
}

我考虑使用绝对定位，但是.info的高度可变，因为它的内容长度可变。

我更喜欢纯CSS解决方案，但如有必要，我愿意接受jQuery / JS解决方案。

最佳答案

如果.info具有已知的height，则可以使用float属性和行为来欺骗它：

.thumbnails {
  float:left;
  clear:left;
  width:100%;
}
.gallery:before {
  content:'';
  float:left;
  height:130px;/* this should be the height and margins used by .info .... but js do not access pseudo element */
}
.info {
  height:100px;
  display:flex;
  border:solid tomato;
  justify-content:center;
  align-items:center;
  background:turquoise;
  color:white;
  font-size:2em;
  }

<div class="container">
  <div class="gallery">
    <div class="image-wrap"> image-wrap </div>
    <div class="thumbnails"> thumbnails </div>
  </div>
  <div class="info"> info </div>
</div>

codepen to play with

关于javascript - 重新排序不是 sibling 的Divs，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41621914/