<section id="home">
<div class="container">
<div class="row align-items-center container-items">
<div class="col-md-6">
<div class="info">
<h1>Lorem ipsum dolor sit amet <u style="color: rgb(165, 177, 231);">consectetur.</u> </h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga, pariatur corporis! Quaerat officiis sit rerum exercitationem
facilis quas ex veritatis quod dolores delectus reiciendis autem dignissimos doloremque consequuntur, ad eaque possimus corrupti.
Fugiat, non unde labore, cupiditate nobis quis maxime error, omnis rerum tenetur officiis ea doloremque qui nihil officia?</p>
</div>
<ul>
<li>
<img src="./image/freshfood.png" alt="">
<span><u>Fresh Foods</u> </span>
</li>
<li>
<img src="./image/restaurant.png" alt="">
<span> <u>Master Chefs</u> </span>
</li>
</ul>
</div>
<div class="col-md-6 food-img">
<div>
<img src="image/home.png" alt="">
</div>
</div>
</div>
</div>
</section>
To ensure that the elements within the HTML code reorder correctly at a screen width below 575.98 pixels, I have utilized CSS flex properties for the specific classes. By applying 'order' property to .info and .food-img classes, I can control the visual placement of these elements when viewed on smaller devices.
#home .container-items {
display: flex;
}
#home .info{
max-width: 100%;
height: 15rem;
order: 1 ;
}
#home .food-img{
order: 2;
}
I have included the above CSS styles in order to adjust the positioning of different sections as per the screen size. Typically, defining the 'order' property is essential to rearrange the layout and prioritize certain content depending on the available space. This implementation ensures a responsive design by dynamically switching the display order of elements under specified conditions.