html - 如何仅使用 css 将图像移动到文本下方

Question

我正在尝试将图像移动到文本下方。我尝试（位置：绝对）并使用 -px 移动图像，但我希望图像保持在 HTML 上的同一位置，但仅使用 CSS 移动它。我正在采用移动优先的方法，并且由于桌面设计，IMG 必须保持在 HTML 中的相同位置。我也尝试移动文本，但它只是越过图像或填充并且不起作用。通过截图可能更容易解释：

我想要达到的结果：

我目前的结果是：

我当前的代码是：

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>

标签： htmlcss

Answer 1

试试这个

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