div在响应模式下的位置

Question

我将内容布局为在左侧显示一个div中的图像，然后在另一个div 中显示带有链接的文本

然而，在响应模式下，我的带有链接的内容div位于带有图像的div之上

是否可以使显示与我的div的顺序相对应？

我想先显示图像，然后显示我的内容

这是我的html:

<div class="col-12 col-lg-6 d-flex justify-content-center justify-content-lg-end mb-4 mb-lg-0">
<div class="w-100 img-fluid px-3 px-lg-0">
<img src="#" alt="#">
</div>
</div>
<div class="col-12 col-lg-6 text py-5">
<h1>title</h1>
<div class="pr-0 pr-0">
<h2>subtitle</h2>
</div>
<p>{# some content #}</p>
<a href="">link</a>
</div>

Answer 1

给你。。。

图像优先：

#my_img {
width: 200px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="row">
<div class="col-12 col-lg-6 d-flex justify-content-center justify-content-lg-end mb-4 mb-lg-0">
<div class="w-100 img-fluid px-3 px-lg-0">
<img id="my_img" src="https://img.freepik.com/free-photo/portrait-giraffe-sunlight-daytime-with-blurry-space_181624-47393.jpg?w=2000" alt="#">
</div>
</div>
<div class="col-12 col-lg-6 text py-5">
<h1>title</h1>
<div class="pr-0 pr-0">
<h2>subtitle</h2>
</div>
<p>{# some content #}</p>
<a href="">link</a>
</div>
</div>

内容优先：

使用Bootstrap的order类。

#my_img {
width: 200px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="row">
<div class="col-12 col-lg-6 d-flex justify-content-center justify-content-lg-end mb-4 mb-lg-0 order-lg-1 order-2">
<div class="w-100 img-fluid px-3 px-lg-0">
<img id="my_img" src="https://img.freepik.com/free-photo/portrait-giraffe-sunlight-daytime-with-blurry-space_181624-47393.jpg?w=2000" alt="#">
</div>
</div>
<div class="col-12 col-lg-6 text py-5 order-lg-2 order-1">
<h1>title</h1>
<div class="pr-0 pr-0">
<h2>subtitle</h2>
</div>
<p>{# some content #}</p>
<a href="">link</a>
</div>
</div>