After implementing a basic grid-based layout using Bootstrap 4, I encountered a challenge with the responsiveness of my columns.
My layout consists of two columns: Left and Right. The left column is defined as div.col-12.col-md-5, while the right column is set as div.col-12.col-md-7. The issue arises with the left column containing a table, which restricts its resizability. To ensure the table data is always displayed correctly, I decided to set a minimum width of 460px for the left column. However, I still want the right column to remain fully responsive and only stop resizing when the screen size falls below the medium breakpoint -768px-.
In an attempt to achieve this desired behavior, I wrote the following CSS:
@media (min-width: 768px) {
.min-width-460-md {
min-width: 460px;
}
}
I then assigned the .min-width-460-md class to the left column, resulting in the following HTML structure:
<section class="container-fluid">
<div class="row">
<div class="col-12 col-md-5 min-width-460-md">
First column (left) containing a table with a minimum width of 460px.
</div>
<div class="col-12 col-md-7">
Second column with resizable data, not requiring a minimum width.
</div>
</div>
</section>
However, the application of the new class caused the left column to stop resizing at 460px, causing the right column to position itself below the left one, which is not the desired outcome.
My goal is for the left column to stop resizing at 460px while allowing the right column to keep resizing until the screen reaches less than 768px (md breakpoint).
Is there a way to achieve this using CSS and Bootstrap 4?
Thank you in advance!