I am using a bootstrap grid following images show a mobile view and desktop view.Mobile view[1] Desktop view [2]. Please guide me on how to achieve this. This is my code. [1]: https://i.sstatic.net/OUYfU.png [2]: https://i.sstatic.net/0yri7.png
<div class="card" style="background: rgba(255, 29, 0, 0.05);">
<div class="row">
<div class="row">
<div class="col-sm-5">
<h3 class="p-50 m-l-20">Lawns and Banquests</h3>
<div class="scrollmenu m-l-50">
<a class="">Aster Lawns</a>
<a class="#news">Iris Lawns</a>
<a class="#contact">Tulip Lawns</a>
<a class="#about">Marigold Hall</a>
</div>
<div class="lawn-tile p-50">
<h1>srfdfsdfds</h1>
</div>
</div>
<div class="col-sm-7">
<img class="" style="width: 742px; height: 589px;" >
</div>
</div>
<div class="row">
<div class="col-6">
<div class="lawn-text">
<p>sdfsdfsdfdsfsdfsdafsdkbsjsdjbsubuvwekuwrhfsgvbfuywherhfuefhirherihger</p>
</div>
</div>
</div>
</div>
</div>
</div>```
Try this
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="./assests/style.css">
<title>Hello, world!</title>
</head>
<body>
<h1>HELLO BOOTSTRAP</h1>
<div class="row flex-column-reverse flex-md-row">
<div class="col-sm-12 col-md-6">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at laoreet tortor,
vitae sodales magna. Curabitur vel feugiat magna, vitae vehicula nibh. Proin
eget lobortis mi. Sed dapibus urna quis risus fringilla ultrices. Praesent lacinia
fermentum velit, vitae ultricies nibh porttitor quis. Aenean nisi mi, elementum id
quam eu, tristique porta nunc. Vestibulum ac faucibus lorem. Donec sit amet metus
venenatis nisi tincidunt ultrices. In semper nibh nunc, at posuere purus rhoncus
ac. Mauris pulvinar sed mauris quis efficitur. Proin sollicitudin euismod purus,
a gravida neque cursus sed. Etiam faucibus aliquet metus, ut accumsan augue
suscipit nec. Donec laoreet nisi nibh, ac egestas nisl hendrerit sit amet.
Morbi scelerisque, velit quis suscipit viverra, sem velit varius nulla, vitae
tincidunt felis elit sit ametdolor. Nulla mi tellus, imperdiet nec nisi non,
suscipit suscipit lacus. Nunc porttitor nibh at purus dignissim mollis.
</p>
<p>
Phasellus sodales tempor turpis, a vehicula sem. Donec et leo in lorem venenatis
interdum at non risus. Maecenas aliquam, turpis at posuere tristique, nunc
nibh maximus nisl, a tristique lacus turpis a ligula. Proin gravida
id odio eget facilisis. Phasellus varius quis arcu in lobortis. Vivamus eu condimentum velit.
Praesent massa purus, iaculis eget consectetur sed, dictum in turpis.
Mauris quis tempus massa. Sed quam justo, viverra id
ligula sit amet, aliquet vehicula tortor.
</p>
</div>
<div class="col-sm-12 col-md-6">
<img src="https://picsum.photos/536/354" style="width: 100%; height: 100%;" alt="unsplash">
</div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
<!-- JQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>