Сделать 3 отзывчивых столбца?

Question

Я хочу создать адаптивную сетку столбцов, как в на этой картинке .Вот как я хочу, чтобы он выглядел в режиме рабочего стола.

В мобильном режиме я хочу, чтобы он уменьшался и накладывался друг на друга при изменении размера браузера.

Как мне это сделать?

Вот мой код:

.help-icons {
        height: 10rem;
        width: 10rem;
    }

    .icon-one,
    .icon-two,
    .icon-three,
    .icon-four,
    .icon-five,
    .icon-six {
        border: 1px solid $color-silver;
    }

    .dark-text {
        font-size: 0.7rem;
    }

    .light-text {
        color: $color-boulder;
        font-size: 0.5rem;
    }

.help-icons
        .icon-one
            span.wfs-pie-chart
            p.dark-text Some Text
            p.light-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        .icon-two
            span.wfs-user
            p.dark-text Some Text
            p.light-text Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque.
        .icon-three
            span.wfs-git-branch
            p.dark-text Some Text
            p.light-text Mauris nunc congue nisi vitae suscipit tellus mauris a diam.
        .icon-four
            span.wfs-database
            p.dark-text Some Text
            p.light-text Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum.
        .icon-five
            span.wfs-trending-up
            p.dark-text Some Text
            p.light-text Egestas sed sed risus pretium quam vulputate dignissim suspendisse in.
        .icon-six
            span.wfs-cloud
            p.dark-text Some Text
            p.light-text Proin fermentum leo vel orci porta non pulvinar neque laoreet.

Спасибо!

РЕДАКТИРОВАТЬ: У меня уже есть медиа-запросы для мобильных устройств, планшетов и настольных ПК:

//- Mobile
@media screen and (min-width: 15rem){
}

// Tablet
@media (min-width: 768px) {
}

// Desktop
@media (min-width: 1280px) {
}

Answer 1

Вы можете использовать классы Bootstrap row и column.Таким образом, это не является необходимым для любых медиа-запросов, так как Bootstrap сделает все это за вас.Просто убедитесь, что у вас установлен Bootstrap в вашем проекте, тогда вы можете использовать следующий код в html:

<div class="container">
 <div class="row">
  <div class="col-sm-4">
   <div class="row">
   </div>
   <div class="row">
   </div>
  </div>
  <div class="col-sm-4">
   <div class="row">
   </div>
   <div class="row">
   </div>
  </div>
  <div class="col-sm-4">
   <div class="row">
   </div>
   <div class="row">
   </div>
  </div>
 </div>
</div>

Вы можете ознакомиться с документацией Bootstrap для точек останова с разным размером экрана: https://getbootstrap.com/docs/4.1/layout/grid/. Вы также можете изменить ширину и высоту строк и столбцов по своему вкусу, настроив классы Bootstrap или добавив пользовательские классы в классы Bootstrap.

Answer 2

надеюсь, это будет полезно.

.help-icons {
        width: 100%;
    }
.help-icons > div {
    width: 10rem;
    float: left;
    margin-left: 10px;
}

    .icon-one,
    .icon-two,
    .icon-three,
    .icon-four,
    .icon-five,
    .icon-six {
        border: 1px solid $color-silver;
    }

    .dark-text {
        font-size: 0.7rem;
    }

    .light-text {
        color: $color-boulder;
        font-size: 0.5rem;
    }

<div class="help-icons">
              <div class="icon-one">
                <span class="wfs-pie-chart"></span>
                <p class="dark-text"> Some Text</p>
                <p class="light-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
              </div>
               <div class="icon-two">
                <span class="wfs-user"></span>
                <p class="dark-text"> Some Text</p>
                <p class="light-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
              </div>
              <div class="icon-three">
                <span class="wfs-git-branch"></span>
                <p class="dark-text"> Some Text</p>
                <p class="light-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
              </div>
              <div class="icon-four">
                <span class="wfs-database"></span>
                <p class="dark-text"> Some Text</p>
                <p class="light-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
              </div>
              <div class="icon-five">
                <span class="wfs-trending-up"></span>
                <p class="dark-text"> Some Text</p>
                <p class="light-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
              </div>
              <div class="icon-six">
                <span class="wfs-cloud"></span>
                <p class="dark-text"> Some Text</p>
                <p class="light-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
              </div>
</div>