Hide column on smaller screens only with Bootstrap 4

Question

I am trying to create a grid to cover the full screen with 3 columns (left, middle, right)

1. Left: This column should only show up on large views and should be 16.6% of the screen (2/12)
2. Middle: This column should always show up. it should cover 75% (9/12) of the screen on <= mid-size view. And 66.6% (8/12) on large views
3. Right: This column should always show up. It should cover 16.6% (2/12) of the width on large view and 25% 3/12 on <= mid-size view

Here is my html markup

<div class="container-fluid">

    <div class="row">

        <div class="col-lg-2 d-md-none bg-dark text-white">
            <h1>LEFT</h1>
            <p>This column should only show up on large views and should be 16.6% of the screen (2/12)</p>
        </div>
        <div class="col-lg-8 col-md-9 bg-danger text-white">
            <h1>MIDDLE</h1>
            <p>This column should always show up. it should cover 75% (9/12) of the screen on &lt;= mid-size view. And 66.6% (8/12) on a large views</p>
        </div>
        <div class="col-lg-2 col-md-3 bg-warning">
            <h1>RIGHT</h1>
            <p>This column should always show up. It should cover 16.6% (2/12) of the width on large view and 25% 3/12 on &lt;= mid-size view</p>
        </div>
    </div>

</div>

Here is a codeply with my code https://www.codeply.com/go/LRlYKLav32

The class d-md-none does not appear to be working correctly. I am expecting the column to be hidden when the view is small but should be visible on larger views.

How can I correct this issue?

Answer 1

As explained in Missing visible-** and hidden-** in Bootstrap v4 ...

If you want the LEFT on lg and up, it would be: d-none d-lg-block .

If you want the LEFT on lg only it would be: d-none d-lg-block d-xl-none

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-2 d-none d-lg-block bg-dark text-white">
            <h1>LEFT</h1>
            <p>This column should only show up on large views and should be 16.6% of the screen (2/12)</p>
        </div>
        <div class="col-lg-8 col-md-9 bg-danger text-white">
            <h1>MIDDLE</h1>
            <p>This column should always show up. it should cover 75% (9/12) of the screen on &lt;= mid-size view. And 66.6% (8/12) on a large views</p>
        </div>
        <div class="col-lg-2 col-md-3 bg-warning">
            <h1>RIGHT</h1>
            <p>This column should always show up. It should cover 16.6% (2/12) of the width on large view and 25% 3/12 on &lt;= mid-size view</p>
        </div>
    </div>
</div>

https://www.codeply.com/go/PrAVeQSgb4