Как упростить гибкость контейнера HTML / масштабировать панель навигации на мобильных устройствах

Question

Сейчас это то, что у меня в коде HTML:

<div class="row">
        <div class="col-md-4">
              <div class="container--wrap">

У меня есть 3 блока div "col-md-4" в строке вместе с контейнером - оберните каждый из них, чтобы заполнить веб-страницу 3 контейнерами одинакового размера. (строка div находится внутри другого div с class = container-fluid). Когда я настраиваю окно, контейнеры будут складываться друг на друга, но только после того, как я сделаю его намного меньше (например, 2/3). Кроме того, на мобильном устройстве он вообще не складывается, и все контейнеры очень маленькие. Как я могу сделать так, чтобы эти контейнеры могли складываться (сгибаться?) Проще, и чтобы они автоматически складывались на мобильном устройстве? У меня также есть панель навигации, которая отлично смотрится на мобильном телефоне, но остается маленькой на мобильном телефоне, просто свернувшись. Как увеличить размер на мобильном телефоне? Вот код навигационной панели:

cov19. cc (веб-сайт) - это пример того, что я бы хотел, чтобы мой сайт делал. Навигационная панель увеличена на мобильном устройстве, и контейнеры укладываются друг на друга, а не бок о бок. Спасибо

Answer 1

Для Первой проблемы используйте display: flex для строки. Я также использовал медиа-запрос, чтобы, когда пользователь находится на экране мобильного телефона или размер экрана меньше 991 пикселей, контейнеры будут должны быть друг над другом. Пожалуйста, запустите его в полноэкранном режиме и сожмите окно браузера, чтобы увидеть эффект.

@media all and (max-width:991px){
 
.row{


flex-direction:column;


}
.container--wrap{
width:98vw!important;

}

}     

.row{

display:flex;


}

.container--wrap{

width:33vw;
text-align:center;
border:1px solid;
transition:all 0.3s;

}

<div class="row">
        <div class="col-md-4">
              <div class="container--wrap">
              This is one
              </div>
              </div>
        <div class="col-md-4">
              <div class="container--wrap">
              This is two
              </div>
              </div>
        <div class="col-md-4">
              <div class="container--wrap">
              This is three
              </div>
              </div>
              
</div>