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>
>Solution :
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>