Bootstrap div在响应模式中的位置[重复]

i7uq4tfw  于 2022-12-16  发布在  Bootstrap
关注(0)|答案(1)|浏览(119)

此问题在此处已有答案

Order columns through Bootstrap4(6个答案)
4个月前关闭。
我对内容进行布局,在左侧显示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>
n53p2ov0

n53p2ov01#

给你...

图像优先:

#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类。
一个二个一个一个

相关问题