Bootstrap 4: Min-width only for one column - css

Question

I've created a basic grid-based layout with Bootstrap 4.
I have two columns: Left and Right. The left column is a div.col-12.col-md-5 and the right one is div.col-12.col-md-7. Thing is, the left column has a table inside and since tables are not that resizables I want the left column to have a min width of 460px (so the data in the table can always be seen correctly). But I do want the other column in the right to be fully responsive and that it keeps resizing (until screen size < md breakpoint -768px-).
My layout looks something like this:
To try to achieve that behavior I've created this piece of css:
#media (min-width: 768px) {
.min-width-460-md {
min-width: 460px;
}
}
And I've applied the .min-width-460-md class to the left column. So my html code looks something like the next one:
<section class="container-fluid">
<div class="row">
<div class="col-12 col-md-5 min-width-460-md">
First column (left) which contains a table and needs to be min-width 460px.
</div>
<div class="col-12 col-md-7">
Second column (it contains more resizable data, so no min-width required here).
</div>
</div>
</section>
The problem is that with this new class applied to the left column, when it reaches 460px it stops resizing (as I wanted to) but the right column is being positioned below the left one, like this:
I obviously don't want this to happen. What I really want is that when the left column reaches 460px it stops resizing but the right one keeps resizing until the screen reaches less than 768px -md- (then both columns will be col-12).
Is there a way to do this with css + Bootstrap 4?
Thanks in advance!

Answer 1

Simplest way is to use an auto-layout column (.col) on the right...
<section class="container-fluid">
<div class="row">
<div class="col-12 col-md-5 min-width-460-md border">
<table class="table table-striped">
..
</table>
</div>
<div class="col bg-dark text-white">
Second column (it contains more resizable data, so no min-width required here).
</div>
</div>
</section>
Demo: https://www.codeply.com/go/IB5xTytQAq

Answer 2

This is simple issue. You can't use col-* col-md-* for this type of work. It's hard to display properly.
Check the snippet below.
.new-section{
background-color: black;
color: white;
padding: 30px;
}
.new-section .row{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
#media (min-width: 768px){
.new-section .row{
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
}
.new-section .row .min-width-460-md,
.new-section .row .right-column{
padding-left: 15px;
padding-right: 15px;
}
.new-section .row .min-width-460-md{
border: 1px solid #f2f2f2;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
#media (min-width: 768px){
.new-section .row .min-width-460-md{
-ms-flex-preferred-size: 460px;
flex-basis: 460px;
}
}
.new-section .row .right-column{
width: 100%;
}
<section class="container-fluid new-section">
<div class="row">
<div class="min-width-460-md">
First column (left) which contains a table and needs to be min-width 460px.
</div>
<div class="right-column">
Second column (it contains more resizable data, so no min-width required here).
</div>
</div>
</section>
This is not proper solution with bootstra#4. This snippet is what you expected. Below code for bootstrap#4 solution.
#media (min-width: 768px) {
.min-width-460-md {
flex-basis: 460px !important;
max-width: 460px !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<section class="container-fluid">
<div class="row flex-md-row flex-md-nowrap">
<div class="col-12 min-width-460-md bg-secondary">
First column (left) which contains a table and needs to be min-width 460px.
</div>
<div class="col-12 bg-warning">
Second column (it contains more resizable data, so no min-width required here).
</div>
</div>
</section>

Answer 3

Change col-md-5 and col-md-7 both to col-md and remove your custom min-width-460-md. col-md will auto-adjust to table width on smaller screens and make both columns equal width when the screen gets a bit bigger.
For large screens, add the col-xl-5 class to the table column.
Click the "run code snippet" button below and expand to full page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="container-fluid">
<div class="row">
<div class="col-12 col-md col-xl-5 bg-secondary">
The following line will give this div 460px min-width. <br>
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
<br>
First column (left) which contains a table and needs to be min-width 460px.
</div>
<div class="col-12 col-md bg-warning">
Second column (it contains more resizable data, so no min-width required here). Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex totam qui voluptatibus reiciendis possimus laboriosam dolor libero alias quasi sequi at voluptas, porro, obcaecati amet minima fuga consectetur facilis eligendi.
</div>
</div>
</section>