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

Question

我有以下代码，在移动视图中，它在段落末尾显示了应有的图像。但我希望图像显示在移动视图中段落上方的子标题之后。尝试了 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>

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

标题

子标题

图片

段落

标签： htmlcssbootstrap-4

Answer 1

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