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

Question

I have the following HTML:

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

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

How can I use CSS to make the div element with class "reviews" appear after the h2 element with the class "brand". Something like this:

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

UPDATE: I was able to set the margin-top to negative to make it appear where I wanted but now it looks like it is floating on top of things. I used display:block but still it seems floating on top of things. I want it to occupy space.

The negative margin does not appear correctly since different screen sizes will have different negative margins and they are displaying at different positions.

Thanks!

Answer 1

You can use flexbox. It introduces the order property which allows you to reorder flex items:

 #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

you can play a bit with display: table-* CSS properties: if all elements are wrapped in a common container (eg a main element)

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

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

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

You can move up the .reviews element like so

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

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

---

Result