hide elements when smaller screen pls help

hide elements when smaller screen pls help

the following JS does work, somehow, but i have a sense that something is inherently wrong with the condition. could you pls help me sort it out?

Here's the simple html. I want the age distinction (adult vs child) to be out of the screen when it can not contain too many elements. 

  1.              <div  align="center">
  2.                        <select data-role="slider">
  3.                         <option value="off" >man</option>
  4.                         <option value="on"> woman</option>
  5.                       </select>
  6.                     </div></td>
  7.     <td>                    <div class="bigga"  align="center">
  8.                       <select data-role="slider" >
  9.                           <option value="off">adult</option>
  10.                         <option value="on"> child</option>
  11.                       </select>
and here is the unelegant js:

  1. $(document).ready(function() {
  2. if ((screen.width>=240) )
  3. {
  4.  $('.bigga').hide();
  5. }
  6. if ((screen.width>=320) )
  7. {
  8.  $('.bigga').show();
  9. }
  10. });  

First of all, all the trick should be doable with just one condition. By logic, this condition should look as follows:

  1. $(document).ready(function() {
  2. if ((screen.width<=240) )
  3. {
  4.  $('.bigga').hide();
  5. }
  6. });  
    This would mean that when the screen width is 240 or smaller, the "bigga" clas of elements does not show up.
    Why does it not work?...