Скрыть колонку только на маленьких экранах с помощью Bootstrap 4

Question

Я пытаюсь создать сетку, чтобы покрыть весь экран тремя колонками (слева, в центре, справа)

1. Слева: этот столбец должен отображаться только на больших изображениях и должен занимать 16,6% экрана (2/12)
2. Середина: этот столбец должен всегда отображаться. он должен покрывать 75% (9/12) экрана при <= среднем размере. И 66,6% (8/12) на больших просмотров </li>
3. Справа: этот столбец должен отображаться всегда. Он должен покрывать 16,6% (2/12) ширины при большом просмотре и 25% 3/12 при <= среднем размере </li>

Вот моя HTML-разметка

<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>

Вот кодовый код с моим кодом https://www.codeply.com/go/LRlYKLav32

Класс d-md-none не работает должным образом. Я ожидаю, что столбец будет скрыт, когда представление маленькое, но должно быть видно в больших представлениях.

Как я могу исправить эту проблему?

Answer 1

Как объяснено в Отсутствует видимое - ** и скрытое - ** в Bootstrap v4 ...

Если вы хотите ЛЕВЫЙ на lg и выше, это будет: d-none d-lg-block.

Если вы хотите ЛЕВЫЙ на lg только , это будет: 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