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>

因此，如果我在移动设备上查看，它应该看起来像这样

HEADER

SUB-HEADER

图像

PARAGRAPH

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

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

1 个答案: