how to dynamically change css class for html form elements based on other css class -

i want - responsive form have different layout desktop , mobile

i have

• a form in html
• few responsive css classes gantry based template
  • gantry-width-## : defines width based on current container
  • rt-floatleft : name implies
  • hidden-desktop : hides element in desktop
  • visible-desktop : hides element in non-desktop

sample html

<form>     <div class="gantry-width-40 rt-floatleft">         <input class="gantry-width-70" type="text">     </div>     <div class="clear hidden-desktop"></div>     <br class="hidden-desktop" />     <div class="gantry-width-40 rt-floatleft">         <input class="gantry-width-70" type="text">     </div>     <div class="clear"></div>     <br />     <textarea class="gantry-width-70"></textarea> </form> 

here screens give idea

desktop view

mobile view

as can see text boxes small mobile view

note screens cropped hide blank space on right

the reason text-boxes 70% size of container 40% of it's parent, fine in desktop view placed side side, in mobile view in separate rows

so looking change parent container's width 100% of available area in mobile view.

so how can change class of container i.e. gantry-width-40 gantry-width-90 based on css of hidden-desktop or visible-desktop class?

i prefer css solution, other's welcome too.

why use different classes? can use mediaqueries.

i made small example:

<div id="parent">     <div>text</div> </div> 

#parent {     width: 50%;     background: lightblue;     padding: 5%; } #parent div {     padding: 5%;     background: lightgreen; } @media , (max-width: 500px) {     #parent {         width: 90%;     } } 

what does: when viewport bigger 500px media query doesn't apply, making parent div 50% of viewports width.

then when resize viewport (or device viewport smaller 500px), media query apply. making parent div take 90% of width.

i created jsfiddle you, check here. resize result window see happens.