css - 制作3个响应列？

我想像this picture中那样创建一个响应式列网格。这就是我希望它在桌面模式下的外观。

在移动模式下，当我调整浏览器大小时，我希望它缩小并堆叠在一起。

我该怎么做呢？

这是我的代码：

.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) {
}

最佳答案

希望这会有用。

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