When the screen is big, everything is how it's supposed to look. The problem comes when you are using a phone. I would like these two columns to ALWAYS be on one row, but right now if you are on mobile the columns will stack. How can I make it so that they just resize and stay on one row no matter the size of the screen? I would like the first column(left one) to be the one that gets resized.
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="form-group mb-3">
<label asp-for=Title></label>
<input readonly class="form-control form-control-lg" asp-for=Title placeholder="Title"/>
</div>
<div class="form-group mb-3">
<label asp-for=Description></label>
<textarea readonly class="form-control" asp-for=Description rows="3"></textarea>
</div>
<div class="form-group mb-3">
<label asp-for=Price></label>
<input readonly class="form-control" asp-for=Price/>
</div>
<div class="form-group mb-3">
<label asp-for=Location></label>
<input readonly class="form-control" asp-for=Location/>
</div>
<div class="form-group mb-3">
<label asp-for="CategoryName"></label>
<input readonly class="form-control" asp-for="CategoryName" />
</div>
<div class="form-group mb-3">
<label asp-for="DateCreatedOn"></label>
<input readonly class="form-control" asp-for="DateCreatedOn" />
</div>
</div>
<div class="col-lg-4">
<div class="container">
<div class="card border border-primary rounded p-0 mb-3 mx-1">
<div class="card-body">
<img id="image1" src="@profilePictureSrc" class="card-img">
</div>
<div class="card-footer text-center">
<input readonly class="form-control text-center" asp-for="UserName"/>
</div>
</div>
</div>
</div>
</div>
</div>