basically i had 2 having same radio buttons. first is for desktop view and second is for mobile view i have hide then according to media size using media query.

problem my 1st div checked function is working on desktop view but when it changes to mobile view it don't works?

```
            <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** is for desktop view and
**gen-div1** is for mobile view

i know this is basic question but i need help !!!

this my css
 .

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

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

```