Is there a way to create an effect where the image is on the left side of the text, but when the screen size is reduced, the text goes on top and the image is below?
Currently, I have the opposite layout - the image appears above the text when the screen is smaller. How can I reverse this?
Below is the code I am using (with separate divs for the image and description text):
<div class="container productwrap shadow-lg mt-3">
<div class="row">
<div class="col-md-4 p-2 m-3 border float-left">
<img src="../Pictures/snacks3.jpeg" alt="snacks2">
</div>
<div class="col-md-7 p-2 my-3 border rounded float-right">
<p class="newarrival text-center pt-3 font-weight-bold">Trendy Snacks</p>
<h2 style="display: inline-block" class="p-3 ml-2 border rounded">Brown Sugar Yogourt</h2>
<span class="badge badge-success align-top m-1">NEW!</span>
<p class="lead font-weight-bold text-warning m-4">CAD $9,99</p>
<p class="m-4"><strong>Unit: </strong>2 x 100g</p>
<p class="m-4"><strong>Availability: </strong>In Stock</p>
<label for="qty" class="ml-4"><strong>Quantity:</strong>
<input type="text" id="qty" name="qty" class="small w-25 text-right" value="1"><button class="btn btn-outline-success btn-sm" href="#" role="submit">Add to Cart</button></label>
<p>
<button class="btn btn-info btn-sm m-2 mr-3 rounded-pill" data-toggle="collapse" data-target="#moreinfo">More info</button>
<div id="moreinfo" class="collapse text-wrap">
This delicacy instills the careful mix of brown sugar and yogourt. Its rich nutriments will revitalize your spirit and set you ready for your day.
</div>
</p>
</div>
</div>
</div>
I have attempted to use float-right/left properties, but it does not seem to work as expected.