Starting Point
I am in the process of designing a layout with Bootstrap 4.
Here's a rough representation of what I am aiming for:
https://i.sstatic.net/7QTpk.jpg
And here is the basic structure:
<div class="row">
<div class="col-12 col-md-3">
<img src="..." style="width:100%; max-width: 400px;" />
</div>
<div class="col-12 col-md-6">
TITLE
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 offset-md-3">
CONTENT
</div>
</div>
With the responsive layout feature of Bootstrap 4, the elements stack on small devices while preserving the desired layout on medium and larger devices.
Current Issue
The image, while at a reasonable size, is causing line L2 (as shown in the image) to be pushed downwards unless the image is kept very small using the max-width CSS style.
Intended Outcome
I aim to have the image slightly larger without impacting the height of the container <div class="row"> that holds it. Essentially, I want to prevent line L2 from being pushed down.
In essence, I want the image to overflow its container.
Is there a solution for this scenario?
Attempts So Far
I have explored various overflow-y CSS attributes, but none have provided the desired result.
I would greatly appreciate any assistance.
End Goal