mobile version CSS can’t work, can anyone give a help ?

i tweaked a siteorigin short code’s CSS style, there are 6 thumbs grids, 3 grids in 1 row, web version performs good, but mobile version can’t work, i only modified each grid’s width :
(web)
width: 32.98%!important;
display: flex;
to
(mobile)
width: 100%!important;
display: block;

but result still kept 3 grids in 1 row, each grid can’t perform in one row,

what’s wrong in my tweak ?

無線充電

web version :
.home .so-widget-sow-features .sow-features-list .sow-features-feature {
position: relative;
float: left;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 5px;
display: flex;
margin: 2px;
height: 165px;
width: 32.98%!important;
background: #ececec;
}

mobile version :

@media screen and (max-width: 768px) {
.home .so-widget-sow-features .sow-features-list .sow-features-feature {
position: relative;
float: left;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 5px;
display: block;
margin: 2px;
height: 165px;
width: 100%!important;
background: #ececec;
}
}