I'm using Bootstrap 4. I have a row, within a container, with two columns as below. I need the first column's image, to pull left out of the container as per my image. How can I stretch the first column, and image, to the left of the screen outside the container whilst maintaining the height of the other column, i.e, if content gets bigger, the other column grows.
<div class="container">
<div class="row">
<div class="col-6">
<img src="assets/img/test/test.jpg" class="h-100 w-100 d-block">
</div>
<div class="col-6 d-flex align-items-center my-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacinia lectus a velit euismod, accumsan venenatis quam fermentum. Pellentesque nec est scelerisque, pretium quam vulputate, fringilla elit. Donec lobortis velit et odio imperdiet, id tincidunt arcu aliquet. Proin non lacus scelerisque, tempor ipsum sed, commodo ipsum. Aliquam purus nisl, pulvinar id tristique eu, porttitor ut purus. Curabitur at nisi quam. Pellentesque tristique massa eu cursus pharetra. Nam id elit venenatis ante varius condimentum. Etiam convallis tortor sed posuere elementum. Suspendisse nec tempus nulla, nec pretium magna. Donec vitae venenatis diam, ut tincidunt elit. Praesent feugiat, nisl at sollicitudin consequat, nibh magna lacinia libero, nec commodo tortor odio non nisl. In sem eros, condimentum ac arcu nec, tincidunt blandit quam. Aenean vitae dapibus odio, id dapibus mi.</p>
</div>
</div></div>
