Bootstrap 4 скрыть одну колонку на мобильном устройстве

Question

У меня есть этот код:

<div class="row">
                <div class="col-lg-3">
                    <div class="ava-block">

                    </div>
                </div>
                <div class="col-lg-6">
                    ...
                </div>
                <div class="col-lg-3">
                   ....
                </div>
</div>

Как мне сначала спрятать col-lg-3 на мобильном телефоне и обновить col-lg-6 до col-lg-9? Мне не нужно показывать col-lg-3 на мобильных устройствах. Но если я прячусь на CSS с media, то col-lg-6 не изменяет размер до полной ширины.

Answer 1

Звучит так, будто ты хочешь что-то подобное. Используйте для отображения , чтобы показать / скрыть столбец. Используйте col для col-lg-6, чтобы он всегда заполнял оставшуюся ширину.

<div class="container-fluid">
    <div class="row">
        <div class="col-3 d-none d-lg-block">
            <div class="ava-block border">
                3
            </div>
        </div>
        <div class="col">
            <div class="ava-block border">
                6-9
            </div>
        </div>
        <div class="col-3">
            <div class="ava-block border">
                3
            </div>
        </div>
    </div>
</div>

Демо: https://www.codeply.com/go/gyuRoUt68s

Answer 2

Чтобы скрыть div на мобильном, вы должны использовать класс css .d-none .d-sm-block, а чтобы сделать div большим только на мобильном, вы должны использовать .col-xs-9

Итак:

<div class="row">
  <div class="d-none d-sm-block col-lg-3">
    <div class="ava-block">
    </div>
  </div>
  <div class="col-xs-9 col-lg-6">
    ...
  </div>
  <div class="col-lg-3">
    ....
  </div>
</div>

Проверьте Документация Bootstrap на дисплее