javascript - 当我使用媒体查询时，HTML 单选按钮检查功能不？

Question

基本上我有 2 个具有相同的单选按钮。第一个用于桌面 View ，第二个用于移动 View ，然后根据媒体大小使用媒体查询隐藏。

问题是我的第一个 div 检查功能在桌面 View 上工作，但当它更改为移动 View 时它不起作用？

            <div class="gen-div">
                <div class="form-group gen-label">
                    <label class="col-sm-12 lab" for="id_gender">Gender *</label>
                </div>
                <div class="form-group gen-div-margin">
                    <div class="col-xs-4" style="padding:12px;"><input type="radio" name="gender" value="male" checked/> <label>Male</label></div>
                    <div class="col-xs-4" style="padding:12px;"><input type="radio" name="gender" value="female"/> <label>Female</label></div>
                    <div class="col-xs-4" style="padding:12px;"><input type="radio" name="gender" value="other"/> <label>Other</label></div>
                </div>
            </div>

            <div class="form-group gen-div1">
                <label class="col-sm-2 lab" for='id_gender'>Gender *</label>
                <div class="col-sm-2" style="padding:12px;">
                    <input type="radio" name="gender" value="male" checked/> <label>Male</label>
                </div>
                <div class="col-sm-2 " style="padding:12px;">
                    <input type="radio" name="gender" value="female"/> <label>Female</label>
                </div>
                <div class="col-sm-2" style="padding:12px;">
                    <input type="radio" name="gender" value="other"/> <label>Other</label>
                </div>
            </div>

gen-div 用于桌面 View 和 gen-div1 用于移动 View

我知道这是基本问题，但我需要帮助!!!

这是我的CSS .

.gen-div{display:none;}
 .gen-div1{display:block;}

@media only screen and (max-width: 750px)
 {
.gen-div{display:block;} .gen-div1{display:none;}}

Answer 1

.gen-div {display:block;} // used for desktop shown by default
.gen-div1 {display:none;} // used for mobile hidden by default

@media only screen and (max-width: 750px) { // mobile media query
.gen-div {display:none;} // used for desktop hidden when on mobile
.gen-div1 {display:block;} // used for mobile shown when on mobile   
}