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

i7uq4tfw 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(1)|浏览(126)

此问题在此处已有答案：

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>

twitter-bootstrap

来源：https://stackoverflow.com/questions/73474532/position-of-div-in-responsive-mode

1条答案

按热度按时间

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

赞(0）回复(0）举报 2022-12-16

我来回答

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

1条答案

相关问题

热门标签

最新问答