How best can one make the Sling Bag title and its details, wrap below the image of the handbag, while on a small screen? This page is thanks to Bootstrap! <div = > <h3> Contact Information </h3> <form action="#"> <label for="fname" class="pt-4 pr-4"> First Name: </label> <input type="text" placeholder="First Name" class="w-50" id="fname" name="fname"> <br> <br> <label for="lname" class="pr-4"> Last Name: </label> <input type="text" placeholder="Last Name" class="w-50" id="lname" name="lname"> <br> <br> <label for="telno" class="pr-4"> Phone No: </label> <input type="number" placeholder="+254 722554294" class="w-50" id="telno" name="telno"> <br> <br> </form> <h4 class="pt-4"> Recipient's Delivery Address </h4> <form action="#"> <label for="idnumber" class="pt-4 pr-4"> ID Number: </label> <input type="number" placeholder="Id Number" class="w-50" id="idnumber" name="idnumber"> <br> <br> <label for="companyname" class="pr-4"> Company Name: </label> <input type="text" placeholder="Company Name or Estate Name" class="w-50" id="companyname" name="companyname"> <br> <br> <label for="apartmentname" class="pr-4"> Apartment Name: </label> <input type="text" placeholder="Apartment, Suite, etc (optional)" class="w-50" id="apartmentname" name="apartmentname"> <br> <br> </form> <h4 class="pt-4"> Additional Information </h4> <form action="#"> <label for="moreinfo" class="pr-4"> <span class="more-info"> More Information: </span> </label> <textarea name="moreinfo" id="moreinfo" cols="30" rows="5"> </textarea> </form> <div class="complete pt-4"> <a href="index.html" class="btn complete-btn"> <span> Complete </span> </a> </div> </div> <div class="items-selected col-xl-5 col-lg-5 col-md-5 col-12"> <div class="items-selected-title"> <h4> <a href="#"> Your Basket </a> </h4> </div> <div class="row media items-selected1 border-top border-bottom p-5"> <div class="col-xl-7 col-lg-7 col-md-7 col-12 media-left"> <a href="handbags.html"> <img src="https://www.freepnglogos.com/uploads/women-bag-png/download-women-bag-transparent-png-image-pngimg-5.png" class="media-object img-responsive w-75" alt="#"> </a> </div> <div class="col-xl-5 col-lg-5 col-md-5 col-12 media-body"> <h4 class="media-heading text-nowrap">Sling Bag</h4> <p class="text-nowrap"> Price: sh.700 </p> <p class="text-nowrap"> Quantity: 3 </p> </div> </div> <div class="row media items-selected2 border-bottom p-5"> <div class="col-xl-7 col-lg-7 col-md-7 col-12 media-left"> <a href="handbags.html"> <img src="asset/images/moreimg1.png" class="media-object img-responsive w-75" alt="#"> </a> </div> <div class="col-xl-7 col-lg-5 col-md-5 col-12 media-body"> <h4 class="media-heading text-nowrap">Hobo Bag</h4> <p class="text-nowrap"> Price: sh.880 </p> <p class="text-nowrap"> Quantity: 5 </p> </div> </div> <div class="total pt-2"> Total: sh.6,500 </div> </div> </div> class "customer-details row" < = > div class "contact-information col-xl-7 col-lg-7 col-md-7 col-12" I created a div tag with class name customer-details. Inside customer-details, I have .customer-information set to col-lg-7 and .items-selected set to col-lg-5. Added class row to class media, in the .items-selected. Inside class media, I set the .media-left to col-lg-7 and media-body to .col-lg-5. As a result, the contents of the .media-body wrapped below the image in the .media-left. This saved me a lot of time and energy. How could I have achieved this using the CSS grid? I would have to write another code and wrap my code in class customer-details-new. The .customer-details-new has customer-details-new and items-selected-new. Use Bootstrap cards in the .items-selected-new. Then, give the images a class of card-img-top, so that the image appears on the top and the text wraps below the image. Then, in the media query of the desired screen size, I set .customer-details to display none as shown below: <div = > <h3> Contact Information </h3> <form action="#"> <label for="fname" class="pt-4 pr-4"> First Name: </label> <input type="text" placeholder="First Name" class="w-50" id="fname" name="fname"> <br> <br> <label for="lname" class="pr-4"> Last Name: </label> <input type="text" placeholder="Last Name" class="w-50" id="lname" name="lname"> <br> <br> <label for="telno" class="pr-4"> Phone No: </label> <input type="number" placeholder="+254 722554294" class="w-50" id="telno" name="telno"> <br> <br> </form> <h4 class="pt-4"> Recipient's Delivery Address </h4> <form action="#"> <label for="idnumber" class="pt-4 pr-4"> ID Number: </label> <input type="number" placeholder="Id Number" class="w-50" id="idnumber" name="idnumber"> <br> <br> <label for="companyname" class="pr-4"> Company Name: </label> <input type="text" placeholder="Company Name or Estate Name" class="w-50" id="companyname" name="companyname"> <br> <br> <label for="apartmentname" class="pr-4"> Apartment Name: </label> <input type="text" placeholder="Apartment, Suite, etc (optional)" class="w-50" id="apartmentname" name="apartmentname"> <br> <br> </form> <h4 class="pt-4"> Additional Information </h4> <form action="#"> <label for="moreinfo" class="pr-4"> <span class="more-info"> More Information: </span> </label> <textarea name="moreinfo" id="moreinfo" cols="30" rows="5"> </textarea> </form> <div class="complete pt-4"> <a href="index.html" class="btn complete-btn"> <span> Complete </span> </a> </div> </div> <div class="items-selected-new"> <div class="items-selected-title"> <h4> <a href="#"> Your Basket </a> </h4> </div> <div class="card row p-3"> <a href="handbags.html"> <img src="https://www.freepnglogos.com/uploads/women-bag-png/download-women-bag-transparent-png-image-pngimg-5.png" class="card-img-top img-responsive w-50" alt="#"> </a> <div class="card-body col-lg-5"> <h4 class="card-title">Sling Bag</h4> <p class="card-text">Price: sh.700</p> <p class="card-text"> Quantity: 3 </p> </div> </div> <div class="card row mt-2 p-3"> <a href="handbags.html"> <img src="asset/images/moreimg1.png" class="card-img-top img-responsive w-50" alt="#"> </a> <div class="card-body"> <h4 class="card-title">Hobo Bag</h4> <p class="card-text">Price: sh.880</p> <p class="card-text"> Quantity: 5 </p> </div> </div> <div class="total pt-2"> Total: sh.6,500 </div> </div> </div> class "customer-details-new" < = > div class "contact-information-new" .customer-details { : grid; grid-template-columns: fr fr; grid-template-rows: repeat( , px); } .contact-information { grid-row: ; grid-column: ; } .items-selected { grid-row: ; grid-column: ; } .customer-details- { : none; } @media only screen and (max-width: px) { .customer-details { : none; } .customer-details- { : grid; grid-template-columns: %; grid-template-rows: px px; } .contact-information- { grid-row: ; grid-column: ; } .items-selected- { grid-row: ; grid-column: ; } } display 3 2 2 500 1 1 1 2 new display 767 display new display 100 500 750 new 1 1 new 2 1 This is how it will look: As you can see, with the CSS grid, my code is longer with a media query. With Bootstrap grid classes, my code is less, neat with no media query. For this reason and many more, which we can discuss later, I prefer using Bootstrap grids compared to using CSS grids.
