Add class and extra HTML to specific menu items with hook
You can add a custom class to menu items by using the Menu Attributes module. You can also use hook_menu_link for the same. For displaying the menu description, here is a sample code. Paste it in your template.php file

/**
* Implements theme_menu_link().
* Adds menu description under main menu 
*/
function themename_menu_link(array $variables) {
  $element = $variables['element'];
  $sub_menu = '';
  $element['#localized_options']['html'] = TRUE;


  if ($element['#below']) {
    $sub_menu = drupal_render($element['#below']);
  }

  if ($element['#original_link']['menu_name'] == "main-menu" &amp;&amp; isset($element['#localized_options']['attributes']['title'])){
    $element['#title'] .= '&lt;span class="description"&gt;' . $element['#localized_options']['attributes']['title'] . '&lt;/span&gt;';
  }

  $output = l($element['#title'], $element['#href'], $element['#localized_options']);
  return '&lt;li' . drupal_attributes($element['#attributes']) . '&gt;' . $output . $sub_menu . "&lt;/li&gt;\n";
}


Note : You've to use css/js to show/hide the menu description based on the screen size.