I've been grappling with a layout issue while using Bootstrap 4, specifically concerning the positioning of elements on mobile devices. I was wondering if anyone could lend me a hand with this challenge.
Let me illustrate the desired layout:
As shown in the image, I'm aiming for a 2-column layout on desktop and a 1-column layout on mobile.
To achieve this, I created a row and added two columns as follows:
<div class="row">
<div class="col-md-12 col-lg-8 col-12">
<div id="productimage"></div>
<div id="description"></div>
<div id="reviews"></div>
</div>
<div class="col-md-12 col-lg-4 col-12">
<div id="pricebook"></div>
<div id="location"></div>
</div>
</div>
This layout functions smoothly on desktop screens.
However, on mobile, my goal is to have the Price & Book section (from Column 2) positioned directly below the Product Image section instead of beneath the Reviews section. With the current setup, it's not achieving the desired result.
Any suggestions on how I can make this adjustment?
Thank you!
(I attempted converting all divs into columns, but encountered issues when the content height varied, leading to disruptions in the desktop layout. Similarly, trying to split this into multiple rows didn't resolve the problem).