Initially, I was unsure about the kind of research I needed to conduct, which led me to asking a potentially duplicate question.
Nevertheless, the code I am working with is quite simple:
#my-container {
height: 100vh;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<div id="my-container" class="container-fluid p-0 m-0">
<div class="row p-0 m-0 h-100 text-white">
<div class="col-sm-8 bg-success">COL 1</div>
<div class="col-sm-4 bg-danger">COL 2</div>
</div>
</div>As depicted, I currently have two columns in an 8:4 ratio spanning the entire page. However, on smaller screens, they appear in two rows with a 1:1 ratio. Like this:
https://i.sstatic.net/qv5at.png
Yet, I am aiming for a different height ratio for these columns, such as an 8:2 ratio, as illustrated here: https://i.sstatic.net/R86gv.png