将元素从div移到另一个div之上

Question

有什么方法可以将h3标题移动到图像上方吗？我需要行上的两个div，一个带图像，另一个带文本。但对于手机，我需要这个订单：

1. 标题
2. 图像
3. 文本

<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

如果你不能更改标记，如果h2是移动的，你可以使用JS将其前置到容器中，如果不是移动的，则可以将其前置回文本容器：

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

如果你能很好地使用position属性，你就能解决你的问题。

<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>