How to display a child div BEFORE the parent div?


Tags: html,css

Problem :

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.



Solution :

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


    CSS Howto..

    How to give an element with an id a certain CSS property if it has a class?

    How do I add two buttons side by side that are made up of an image?

    How to create cube with only HTML and CSS?

    How to always refresh file loaded by ajax, avoiding cached file

    How to apply CSS style which will be ignored for tfoot or last TR

    How to change dropdownlist width to 100% using CSS

    How granular are CSS rem units?

    How to style picture gallery to allow portait and landscape pics that are also links

    How can I center my icon horizontally and vertically?

    CSS: How to set the width and height dependent on the screen/window size?

    CSS: How to move contents of one div into another one

    How to add border between td's in which are in different tr's?

    how to change size of the element using css?

    How can I format outer table but not inner table

    CSS: how to get scrollbars responsive for div inside container when user resizes it upwards

    How to horizontally align to “block” divs inside a div?

    How to display visual rows and cols in textarea using css

    How can I have floated list items display their bullet in IE7?

    How to remove odd bottom padding from gradient inside a button on firefox?

    How to achieve chamfered CSS Border Corners rather than rounded corners?

    How to get image url in css inside a public folder in Rails?

    CSS: How to force floating blocks to have equal (100%?) height

    How to reverse jQuery css styling?

    How to target separated class names through css?

    How to force span to use parent font-family in CSS

    How to change horizontal block-level elements to vertical elements after specific width?

    How to prevent from loading a css and a js sheet at only one Rails controller?

    How to make table by CSS?

    How to override default styles in GWT 2.3?

    How i can make it wiht css3?