Как с помощью bootstrap сделать так, чтобы колонки на md экранах располагались на всю ширину страницы?

Question

[Adil1603]

В размере lg все как надо, по 3 колонки на строку

В md тоже как надо, по одной колонке на строку

Но вот когда уменьшаю размер экрана в sm, он опять становится в 3 колонки на строку

Как сделать, чтобы на экранах lg были в 3 колонки, а если меньше экран, то на всю строку одна колонка?
Сейчас код такой:

<div class="row row-cols-3">
        <div class="col-md-12 col-lg-4">video</div>
        <div class="col-md-12 col-lg-4">video</div>
        <div class="col-md-12 col-lg-4">video</div>
        <div class="col-md-12 col-lg-4">video</div>
        <div class="col-md-12 col-lg-4">video</div>
        <div class="col-md-12 col-lg-4">video</div>
      </div>

Пробовал md заменить на sm, теперь на sm экранах норм тоже, а вот на экстра маленьких опять в 3 колонки становится

Answer 1

[Сергей delphinpro]

все проще

<div class="row">
        <div class="col-lg-4">video</div>
        <div class="col-lg-4">video</div>
        <div class="col-lg-4">video</div>
        <div class="col-lg-4">video</div>
        <div class="col-lg-4">video</div>
        <div class="col-lg-4">video</div>
</div>

Comments

[Сергей delphinpro]

я точно не помню, нужно смотреть документацию, но возможно можно еще как-то так

<div class="row row-cols-lg-3">
        <div class="col">video</div>
        <div class="col">video</div>
        <div class="col">video</div>
        <div class="col">video</div>
        <div class="col">video</div>
        <div class="col">video</div>
      </div>

[Adil1603]

Сергей delphinpro, нет, оба варианта не подошли
в первом на экстрамаленьких экранах по 3 колонки опять становится, потом опять если экран увеличить, то на всех экранах при увеличении 3 колонки
второй вариант не подходит, потому что в маленьком размере экрана она может перенести вниз только одну колонку, остальные 5 стоят в одно ряду.

[Сергей delphinpro]

Adil1603, не люблю когда мне начинают врать

https://codepen.io/delphinpro/pen/GRzjBYE

[Adil1603]

Сергей delphinpro, блин, второй вариант сейчас заработал как надо. до этого было как выше описывал. спасибо вам большое. отметил решением