Difficulties in stacking elements with screen size changes - css

Question

I am having difficulties with stacking my divs alongside one another when the screen size is smaller, then stack on top of one another once I hit phone size.
I am using Foldy Grids by Paravel, On full desktop size, there are 3 divs that are side by side, but I want this to shrink to 2 side by side and then on phone, just 1 on top of one another. However I feel as though I am applying the media queries to the incorrect <div>'s. Any guidance would be much appreciated. Within the CSS the reason I put 33% in is due to the divs being divided into 3 on full desktop mode.
CSS:
#media screen and (max-width: 900px) {
.dashboardIconsMod {
width: 50%;
}
}
#media screen and (max-width: 600px) {
.dashboardIconsMod {
width: 100%;
}
}
.dashboardIconsMod {
color: pink;
border-style: solid;
border-color: red;
}
HTML:
<section id="content">
<div class="container">
<section id="grid" class="clearfix">
<div class="cf show-grid">
<div class="row">
<div class="grid-2 dashboardIconsMod">
<!-- 1st Div -->
<p> 1st Grid </p>
</div>
<div class="grid-2 dashboardIconsMod">
<!-- 2nd Div -->
<p> 2nd Grid </p>
</div>
<div class="grid-2 dashboardIconsMod">
<!-- 3rd Div -->
<p> 3rd Grid </p>
</div>
</div>
<div class="row">
<div class="grid-2 dashboardIconsMod">
<!-- 4th Div -->
<p> 4th Grid </p>
</div>
<div class="grid-2 dashboardIconsMod">
<!-- 5th Div -->
<p> 5th Grid </p>
</div>
<div class="grid-2 dashboardIconsMod">
<!-- 6th Div -->
<p> 6th Grid </p>
</div>
</div>
</div>
</section>
</div>
</section>

Answer 1

I am not sure about Foldy Grids by Paravel as never worked with it and don't have much time to read documentation, but you can fix it by giving different size on media query, just make sure your media query need to be below to your desktop code.
For now, 3 items on the desktop, on smaller screens like iPad there are 2 items and on the smaller screen below 600px, there is a single item.
.dashboardIconsMod {
color: pink;
border-style: solid;
border-color: red;
width:33.33%;
}
* {box-sizing: border-box;}
.show-grid .row {display:flex; flex-wrap: wrap;}
#media screen and (max-width: 900px) {
.dashboardIconsMod {
width: 50%;
}
}
#media screen and (max-width: 600px) {
.dashboardIconsMod {
width: 100%;
}
}
<section id="content">
<div class="container">
<section id="grid" class="clearfix">
<div class="cf show-grid">
<div class="row">
<div class="grid-2 dashboardIconsMod">
<!-- 1st Div -->
<p> 1st Grid </p>
</div>
<div class="grid-2 dashboardIconsMod">
<!-- 2nd Div -->
<p> 2nd Grid </p>
</div>
<div class="grid-2 dashboardIconsMod">
<!-- 3rd Div -->
<p> 3rd Grid </p>
</div>
</div>
<div class="row">
<div class="grid-2 dashboardIconsMod">
<!-- 4th Div -->
<p> 4th Grid </p>
</div>
<div class="grid-2 dashboardIconsMod">
<!-- 5th Div -->
<p> 5th Grid </p>
</div>
<div class="grid-2 dashboardIconsMod">
<!-- 6th Div -->
<p> 6th Grid </p>
</div>
</div>
</div>
</section>
</div>
</section>