Creating dynamic bootstrap contact page - css

Question

This picture should help sum up what I want done.
The code for this can be found here: https://codepen.io/MatteCrystal/pen/xxXpLmK
<div class="container">
<div class="row">
<div class="row gy-2">
<div class="col text-end minWidth200 maxWidth200">
<b>Title: </b>
</div>
<div class="col minWidth350">
Info that spans <br />
multiple lines
</div>
</div>
<div class="row gy-2">
<div class="col text-end minWidth200 maxWidth200">
<b>Title 2: </b>
</div>
<div class="col minWidth350">
More info, that gives lots of details about somthing to the user
</div>
</div>
<div class="row gy-2">
<div class="col text-end minWidth200 maxWidth200">
<b>Title 3: </b>
</div>
<div class="col minWidth350">
Even more info. To give the user a very detailed overview of somthing super important and relevant to their task. This info is integral if you want you're users to have a good user experince.
</div>
</div>
</div>
</div>
Basically, I want the contact page to be made of two pieces of content each. The title portion and then info portion to the right of the title. But on small screens instead of having the title take up valuable width I would prefer to just place the info portion underneath the title.
the title elements are forced to be the same size so they all look uniform, The text portion has a minimum size it can be but it can also grow larger to fit the page.
The problem is the title elements have the bootstrap text-end class to align the title right. But when the minimum size constraints are met the two columns will be stacked on top of each other. When this happens the title element needs to be aligned left otherwise it looks awkward. You can see what I mean in this image.
So is there any elegant or built in class for bootstrap that can achieve the results I want? I want a solution that will be flexible and not require additional changes if I decide to increase or decrease the min or max width allowed for the title or info elements. Ideally I need an option that can detect when a bootstrap row with two or more cols becomes sized small enough that each col becomes stacked on top of each other instead of side by side. Due to various factors this can't be a hard coded value since the moment this happens could differ depending on the circumstances.

Answer 1

This is a classic stacked to horizontal bootstrap layout.
You just need to use the responsive .col-* classes.
Remember BS uses the "mobile first" scheme, so start with .col-12 to ensure full-width on the smallest screens. Then add the appropriate col class(es) for the width(s) you want above each particular breakpoint i.e. .col-md-2 to be 2/12 of the width for medium and above. You can combine this with the responsive text alignment class .text-md-end to only right-align above medium.
Also, note in the example below there is no need to nest multiple .row.gy-2s (unless you have another requirement), columns will automatically wrap to a new line at 12 columns so, I have simplified your markup.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row gy-2">
<div class="col-12 col-md-2 text-md-end">
<b>Title: </b>
</div>
<div class="col-12 col-md-10">
Info that spans <br /> multiple lines
</div>
<div class="col-12 col-md-2 text-md-end">
<b>Title 2: </b>
</div>
<div class="col-12 col-md-10">
More info, that gives lots of details about somthing to the user
</div>
<div class="col-12 col-md-2 text-md-end">
<b>Title 3: </b>
</div>
<div class="col-12 col-md-10">
Even more info. To give the user a very detailed overview of somthing super important and relevant to their task. This info is integral if you want you're users to have a good user experince.
</div>
</div>
</div>