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. 

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

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

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

  2. $(document).ready(function() {
  3. if ((screen.width<=240) )
  4. {
  5.  $('.bigga').hide();
  6. }
  7. });  
    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?...