Top div to appear in bottom and bottom to top - html

Question

My HTML structure shows a paragraph first and then a graphics at the bottom. Using CSS, I want to show the graphics at the top and paragraph at the bottom. The paragraph will be dynamic so the height is not fixed. I can't figure out how to solve the issue.
This my code:
.centerDiv {
width: 500px;
margin: 0 auto;
}
.topDiv {
display: inline-block;
width: 460px;
vertical-align: top;
}
.bottomDiv {
display: inline-block;
width: 460px;
height: 100px;
background-color: #ff0000;
vertical-align: top;
}
<div class="centerDiv">
<div>
<div class="topDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra vel risus sed ultricies. Nulla vitae arcu dolor. Integer ut ex dapibus, malesuada urna maximus, laoreet tellus. Sed enim massa, elementum nec ultrices nec, pellentesque tristique
nibh. Donec dignissim facilisis dui, eu porttitor ante. Fusce posuere convallis augue, sed ultricies massa finibus vel.</div>
<div class="bottomDiv">Graphic</div>
</div>
</div>

Answer 1

If the Graphic has a fixed height you can achieve that using positioning
see the code bellow
.centerDiv {
width: 500px;
margin: 0 auto;
}
/* added code */
.centerDiv>div {
position: relative;
padding-top: 100px; /* padding value equals to bottomDiv's height*/
}
/*---------------*/
.topDiv {
display: inline-block;
width: 460px;
}
.bottomDiv {
display: inline-block;
width: 460px;
height: 100px;
background-color: #ff0000;
/* added code */
position: absolute;
top: 0;
left: 0;
/*---------*/
}
<div class="centerDiv">
<div>
<div class="topDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra vel risus sed ultricies. Nulla vitae arcu dolor. Integer ut ex dapibus, malesuada urna maximus, laoreet tellus. Sed enim massa, elementum nec ultrices nec, pellentesque tristique
nibh. Donec dignissim facilisis dui, eu porttitor ante. Fusce posuere convallis augue, sed ultricies massa finibus vel.</div>
<div class="bottomDiv">Graphic</div>
</div>
</div>
Or you can use flex-direction: column-reverse; which reverses the order of the div children
But this may not be supported in some browsers
.centerDiv {
width: 500px;
margin: 0 auto;
}
.centerDiv>div {
display: flex;
flex-direction: column-reverse;
}
.topDiv {
display: inline-block;
width: 460px;
}
.bottomDiv {
display: inline-block;
width: 460px;
height: 100px;
background-color: #ff0000;
}
<div class="centerDiv">
<div>
<div class="topDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra vel risus sed ultricies. Nulla vitae arcu dolor. Integer ut ex dapibus, malesuada urna maximus, laoreet tellus. Sed enim massa, elementum nec ultrices nec, pellentesque tristique
nibh. Donec dignissim facilisis dui, eu porttitor ante. Fusce posuere convallis augue, sed ultricies massa finibus vel.</div>
<div class="bottomDiv">Graphic</div>
</div>
</div>