How to move an image beneath the text using only css - html

Question

I am trying to move an image underneath the text. I tried (position: absolute) and moving the image with -px but I want the image to stay in the same place on the HTML but have it moved using only CSS. I am doing a mobile-first approach and because of the desktop design, the IMG has to stay at the same position in HTML. I also tried to moving the text but it just goes over the image or the padding and just doesn't work. It might be easier to explain by screenshots:
The results I want to achieve:
And my current results are:
And my current code is:
img {
display: block;
width: 50%;
}
<header id="titleHeader">
<h1><span id="boot">Example</span>Text</h1>
<a class="navbutton" href="#navbar">Menu</a>
</header>
<section id="intromessage">
<img alt="shoes" src="https://cdn11.bigcommerce.com/s-h8hjw/products/927/images/735/WBHQ19-Retail-Product-OnWhite-Boots-M-1500x1425__00368.1599677007.475.500.png?c=2">
<div>
<h2>Example Text</h2>
<p>
example text, example text, example text<span> example text </span>example text
<span>example text</span>
</p>
</div>
</section>

Answer 1

Try this out
<style>
#intromessage{
display: flex;
flex-direction: column-reverse;
}
</style>

Answer 2

A few options are avalaible.
transform:scale(x) can be used
#intromessage,
#intromessage>* {
transform: scale(1, -1); /* value to add/remove via mediaquerie */
}
img {
display: block;
width: 50%;
margin:auto;
}
<header id="titleHeader">
<h1><span id="boot">Example</span>Text</h1>
<a class="navbutton" href="#navbar">Menu</a>
</header>
<section id="intromessage">
<img alt="shoes" src="https://cdn11.bigcommerce.com/s-h8hjw/products/927/images/735/WBHQ19-Retail-Product-OnWhite-Boots-M-1500x1425__00368.1599677007.475.500.png?c=2">
<div>
<h2>Example Text</h2>
<p>
example text, example text, example text<span> example text </span>example text
<span>example text</span>
</p>
</div>
</section>
for older browser, display:table could be involved :
#intromessage {
display: table;
width: 100%
}
#intromessage>div {
display: table-header-group;/* value to add/remove via mediaquerie */
}
img {
display: block;
width: 50%;
margin: auto;
}
<header id="titleHeader">
<h1><span id="boot">Example</span>Text</h1>
<a class="navbutton" href="#navbar">Menu</a>
</header>
<section id="intromessage">
<img alt="shoes" src="https://cdn11.bigcommerce.com/s-h8hjw/products/927/images/735/WBHQ19-Retail-Product-OnWhite-Boots-M-1500x1425__00368.1599677007.475.500.png?c=2">
<div>
<h2>Example Text</h2>
<p>
example text, example text, example text<span> example text </span>example text
<span>example text</span>
</p>
</div>
</section>
flex is already answered but order can be used too :
#intromessage {
display: flex;
flex-wrap:wrap;/* to be different from other answer */
}
#intromessage>div {
width: 100%;
}
img {
display: block;
width: 50%;
margin: auto;
order: 1;/* value to add/remove via mediaquerie */
}
<header id="titleHeader">
<h1><span id="boot">Example</span>Text</h1>
<a class="navbutton" href="#navbar">Menu</a>
</header>
<section id="intromessage">
<img alt="shoes" src="https://cdn11.bigcommerce.com/s-h8hjw/products/927/images/735/WBHQ19-Retail-Product-OnWhite-Boots-M-1500x1425__00368.1599677007.475.500.png?c=2">
<div>
<h2>Example Text</h2>
<p>
example text, example text, example text<span> example text </span>example text
<span>example text</span>
</p>
</div>
</section>
and the latest : grid can use order too
#intromessage {
display: grid;
grid-template-rows: auto;
}
img {
display: block;
width: 50%;
margin: auto;
order: 1;/* value to add/remove via mediaquerie */
}
<header id="titleHeader">
<h1><span id="boot">Example</span>Text</h1>
<a class="navbutton" href="#navbar">Menu</a>
</header>
<section id="intromessage">
<img alt="shoes" src="https://cdn11.bigcommerce.com/s-h8hjw/products/927/images/735/WBHQ19-Retail-Product-OnWhite-Boots-M-1500x1425__00368.1599677007.475.500.png?c=2">
<div>
<h2>Example Text</h2>
<p>
example text, example text, example text<span> example text </span>example text
<span>example text</span>
</p>
</div>
</section>

Answer 3

I would use flexbox for a responsive layout.
#intromessage {
display: flex;
flex-direction: column-reverse;
}
Here is a good resource: CSS Tricks - Guide to Flexbox