仅使用CSS使元素出现在另一个元素之后

Question

我有以下HTML：

<h2 class="brand> </h2>
..
.. (lots of other elements like <img, p, h2 etc) 
..

<div class="reviews">...</div>

如何使用CSS使带有“review”类的div元素出现在带有“brand”类的h2元素之后。像这样：

<h2 class="brand> </h2>
<div class="reviews">...</div>
..
.. (lots of other elements like <img, p, h2 etc) 
..

更新：我能够将margin-top设置为负值，使其显示在我想要的位置，但现在它看起来像是浮在事物之上。我使用display：block但它似乎仍然漂浮在事物之上。我希望它占据空间。

由于不同的屏幕尺寸具有不同的负边距并且它们显示在不同的位置，因此负边距不会正确显示。

谢谢！

Answer 1

您可以使用flexbox。它引入了order属性，允许您重新排序弹性项目：

#wrapper {
  display: flex;          /* Magic begins */
  flex-direction: column; /* Column layout */
}
#wrapper > .brand ~ :not(.reviews) {
  order: 1;               /* Move to the bottom */
}

<div id="wrapper">
  <h2 class="brand">Title</h2>
  <p>Paragraph</p>
  <div>Div</div>
  <div class="reviews">Reviews</div>
</div>

Answer 2

你可以使用display: table-* CSS属性玩一下：如果所有元素都包含在一个公共容器中（例如main元素）

<main>
  <h2 class="brand">Title</h2>

   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>

   <div class="reviews">reviews</div>
</main>

您可以向上移动.reviews元素

main          { display: table; }   
main .brand   { display: table-caption; }
main .reviews { display: table-header-group; }

Codepen ：http://codepen.io/anon/pen/XbEBma

结果