0

I layout my content to display on the left an image in a div, then text with a link in another div

However in responsive mode, my content div with the link goes above my div with image

Is it possible to have the display corresponding to the order of my divs?

I would like to display the image first and then my content

there is my 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>
yonea
  • 89
  • 6
  • You can use order property of bootstrap, moreover you can also use row-reverse class to reverse the order in bootstrap. – Nexo Aug 24 '22 at 14:04

1 Answers1

1

Here you go...

Image first:

#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>

Content first:

Use Bootstrap's order classes.

#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>
Rok Benko
  • 14,265
  • 2
  • 24
  • 49