Html 如何使复选框列表响应？

我有一个复选框列表，共有28项

在桌面上查看时，我希望一行显示4个项目，在移动设备中每行显示1个项目

我怎样才能做到这一点

我尝试的如下：（但没有成功）

目前的代码是：

<style>
input[type="checkbox"].mixed + label { 
margin:5px;
color:#073F4B;
font-size:14px;
width :150px;
}   

@media only screen and ( max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi)  {
input[type="checkbox"].mixed + label { 
margin:5px;
color:#073F4B;
font-size:14px;
width :90%;
}   

}
</style>

输入[type=“checkbox”]。混合+标签{
保证金：5px；
颜色：#073F4B；
字体大小：14px；
宽度：150px；
}   
@仅媒体屏幕和（最大宽度：767px）和（-webkit最小设备像素比：1.5），仅屏幕和（最小-moz设备像素比：1.5），仅屏幕和（最小分辨率：240dpi）{
输入[type=“checkbox”]。混合+标签{
保证金：5px；
颜色：#073F4B；
字体大小：14px；
宽度：90%；
}   
}

并显示复选框列表（例如显示8项）：

>藏书

>着色

>烹饪

>长途跋涉

---

感谢您在ADADVANCE中的建议，为什么不使用bootstrap？ 每个复选框可以有xs-12用于小屏幕，md-4用于中型屏幕。 有关详细信息，请查看

<input type="checkbox" name="hobbies[]" value="Astrology" class="mixed" <?php if(in_array(Astrology,$my_stored_game)){echo "checked";}?>><label>Astrology</label><br>    
<input type="checkbox" name="hobbies[]" value="Book_Collection" class="mixed" <?php if(in_array(Book_Collection,$my_stored_game)){echo "checked";}?>><label>Book Collection</label><br>
<input type="checkbox" name="hobbies[]" value="Coin_Collection" class="mixed" <?php if(in_array(Coin_Collection,$my_stored_game)){echo "checked";}?>><label>Coin Collection</label><br>
<input type="checkbox" name="hobbies[]" value="Coloring" class="mixed" <?php if(in_array(Coloring,$my_stored_game)){echo "checked";}?>><label>Coloring</label><br>
<input type="checkbox" name="hobbies[]" value="Computer" class="mixed" <?php if(in_array(Computer,$my_stored_game)){echo "checked";}?>><label>Computer</label><br>
<input type="checkbox" name="hobbies[]" value="Cooking" class="mixed" <?php if(in_array(Cooking,$my_stored_game)){echo "checked";}?>><label>Cooking</label><br>
<input type="checkbox" name="hobbies[]" value="Dance" class="mixed" <?php if(in_array(Dance,$my_stored_game)){echo "checked";}?>><label>Dance</label><br>
<input type="checkbox" name="hobbies[]" value="Trecking" class="mixed" <?php if(in_array(Trecking,$my_stored_game)){echo "checked";}?>><label>Trecking</label>