<div class="parent">
<h1 class="child-title">Meet the children</h1>
<p class="child-one">I'm child number 1</p>
<p class="child-two">I'm child number 2</p>
<p class="child-three">I'm child number 3</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Funny_Kitten.jpg" alt="cute, furry, children" class="children-img">
.parent {
display: flex;
flex-direction: column;
}
.children-img {
order: -1;
width: 400px;
height: auto;
}
/* These are not needed unless you REALLY want to assign an order to EVERY flex item
.child-title {
order: 2;
}
.child-one{
order: 3;
}
.child-two {
order: 4;
}
.child-three {
order: 5;
}
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.