javascript - 重新排序不是兄弟的 Div

Question

相关: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 解决方案。

Answer 1

如果 .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