html - 如何在移动 View 中的特定位置在一行中放置两个不同的列？

我有以下代码，并在移动视图中按预期在段落后的末尾显示图像。但是我希望图像在移动视图中该段落上方的子标题之后显示。尝试了flex，但除图片以外的所有内容都一直显示在标题上方。有没有一种方法可以用html和CSS实现。

 <div class="row">
    <div class="col-md-10 col-lg-6">
         <div> Some Image Here </div>
    </div>
    <div class="col-lg-6">
        <h1>Header Here</h1>
        <h3> Sub-Header Here </h3>
        <p> Paragraph Here </p>
    </div>
</div>

因此，如果我在手机上查看，它应该看起来像这样

标题

副标题

图片

段

最佳答案

获得所需内容的方法是使用单独的列。使用float-*类然后再使用order-*类在较大屏幕上浮动列，以更改移动设备上的顺序。

<div class="container">
    <div class="row d-md-block">
        <div class="col-md-10 col-lg-6 float-left order-2 order-md-1">
            <div>Some Image Here </div>
        </div>
        <div class="col-lg-6 float-left order-1 order-md-2">
            <h1>Header Here</h1>
            <h3>Sub-Header Here </h3>
        </div>
        <div class="col-lg-6 float-right order-3">
            <p>Paragraph Here </p>
        </div>
    </div>
</div>

https://www.codeply.com/go/IHe5K4aDqH

关于html - 如何在移动 View 中的特定位置在一行中放置两个不同的列？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51143145/