Bootstrap Column, make hidden rather than go under

Question

I have 2 divs

 <div class="col-lg-10 hidden-md">ABC</div>
 <div class="col-lg-2  hidden-md">123</div>

"ABC" has content that won't resize (intentional)

When there isn't enough room to fit "123", Bootstrap will move it under "ABC". I want "123" to disappear in this case, not ever go "under".

Is there a way?

Note I have hidden it for md and below.

Answer 1

EDIT: This code is Bootstrap 3 specific - see Alec's comment for Bootstrap 4 information.

The hidden-md class doesn't actually hide the element for viewports at or below the "medium" viewport width, it hides the element when the viewport falls into the medium width only.

You should be able to use the Bootstrap .visible classes to hide certain elements with this class when the viewport is smaller than a specified size. In this case, the second <div> will only show when the viewport is "large", and disappear when the viewport is smaller than "large" (i.e. medium, small, etc.).

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-10">ABC</div>
        <div class="col-md-2 visible-lg">123</div>
    </div>
</div>

Here's a CodePen example - try stretching and shrinking the browser's width to see what's going on.