title: Bootstrap 4: Min-width only for one column
body: <p>I've created a basic grid-based layout with Bootstrap 4.</p>
  
  <p>I have two columns: Left and Right. The left column is a <code>div.col-12.col-md-5</code> and the right one is <code>div.col-12.col-md-7</code>. 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 &lt; md breakpoint -768px-).</p>
  
  <p>My layout looks something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/ncxNT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ncxNT.png" alt="Layout"></a></p>
  
  <p>To try to achieve that behavior I've created this piece of css:</p>
  
  <pre><code>@media (min-width: 768px) {
      .min-width-460-md {
          min-width: 460px;
      }
  }
  </code></pre>
  
  <p>And I've applied the .min-width-460-md class to the left column. So my html code looks something like the next one:</p>
  
  <pre><code>&lt;section class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-12 col-md-5 min-width-460-md"&gt;
              First column (left) which contains a table and needs to be min-width 460px.
          &lt;/div&gt;
          &lt;div class="col-12 col-md-7"&gt;
              Second column (it contains more resizable data, so no min-width required here).
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/YdGOQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YdGOQ.png" alt="Problem :("></a></p>
  
  <p>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).</p>
  
  <p>Is there a way to do this with css + Bootstrap 4? </p>
  
  <p>Thanks in advance!</p>