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

Question

我有以下代码，在移动 View 中，它按预期在段落末尾显示图像。但我希望图像显示在移动 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>

所以如果我在手机上查看它应该是这样的

标题

副标题

图片

段落

Answer 1

获得所需内容的方法是使用单独的列。使用 float-* 类在大屏幕上 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