Make 3 Responsive Columns? - css

Question

I want to make a responsive grid of columns just like in this picture. That's what I want it to look like in desktop mode.
In the mobile mode, I want it to shrink and stack on top of each other when I resize the browser.
How do I do this?
Here's my code:
.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.
Thanks!
EDIT: I have media queries for the mobile, tablet, and desktop already:
//- Mobile
#media screen and (min-width: 15rem){
}
// Tablet
#media (min-width: 768px) {
}
// Desktop
#media (min-width: 1280px) {
}

Answer 1

hope this would be useful.
.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>

Answer 2

You can make use of Bootstrap's row and column classes. This way it is not necessary for any media queries as Bootstrap does it all for you. Just make sure you have Bootstrap installed in your project, then you can make use of the following code in your 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>
You can check out Bootstrap's documentation for different screen size breakpoints: https://getbootstrap.com/docs/4.1/layout/grid/. You can also change the width and height of rows and columns to your liking, by targeting the Bootstrap classes or adding custom classes to the Bootstrap classes.