CODEWITHSUNDEEP
htmlcss
Henrique Barcelos
Henrique Barcelos

Reputation: 491

How to display a child div BEFORE the parent div?

I have 3 elements, and I want the third one to display before the previous 2. The third is also an image, and the height vary from each content.

The structure I have is:

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

<ul>
 <li>..</li>
</ul>

<div class="image">
</div>

How can I display the image before the first div with css? If not possible with this config, I can also create a new div for the ul, but only if not possible.

Upvotes: 1

Views: 559

Answers (1)

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382092

A solution would be to use the order flex property:

body {
  display: flex;
  flex-direction: column;
}
.image {
  order:-3;
}
<div class="first">
 first
</div>

<ul>
 <li>li</li>
</ul>

<div class="image">image
</div>

Annex: FlexBox compatibility

Upvotes: 2

Related Questions