Move element from div above another div - html

Question

is there some method to move that h3 heading above image? I need two divs on row, one with image and second with text.
But for mobiles I need this order:
heading
image
text
<div class="container">
<div class="image">
<img>
<div class="text">
<h3>Heading</h3>
<p>Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum</p>
</div>

Answer 1

If you can't change the markup, you could use JS to prepend the h2 to the container if it's mobile and prepend it back to the text container if it's not mobile:
var h3 = document.getElementsByTagName('h3')[0];
var container = document.querySelector('.container');
var textContainer = document.querySelector('.text');
window.addEventListener('resize', function(event) {
var mobileMediaQuery = window.matchMedia("(max-width: 768px)")
if (mobileMediaQuery.matches) {
container.prepend(h3)
} else {
textContainer.prepend(h3)
}
}, true);
<div class="container">
<div class="image">
<img src="https://images.unsplash.com/photo-1612392062422-ef19b42f74df?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"/>
<div class="text">
<h3>Heading</h3>
<p>Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum</p>
</div>
</div>

Answer 2

If you use the position property well, you can solve your problem.
<style>
img{
position:relative;
}
h3{
position:absolute;
top:10px/*When you want to add the h3 text at the height you want based on the picture, change the value and adjust it.*/
}
</style>
<div class="container">
<div class="image">
<img>
<div class="text">
<h3>Heading</h3>
<p>Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum</p>
</div>