How to prevent icons from jumping down when sliding in a paragraph (jQuery)

Actually, this makes my question a lot more clear:

SETUP: I have 8 clickable icons. On bigger screens, they're grouped three in a row, three in a row, then 2 in a row. On mobile screens, the icons are one on top of the other, vertically. See this as an example: http://winter-construction.com/services/

PROBLEM: When I click an icon, I want a paragraph to toggle in explaining the icon. However, here's the catch: On mobile screens, I want the individual paragraph to toggle in below each individual icon. On bigger screens, I want the individual paragraph to toggle in below the row of icons, so they don't move around a lot.

How can I do this?? Would I append it to the icon in small screens, and append it to the row div in big screens? Code below:

and my JQuery skeleton. This might not be the quickest way, so if there's something faster, let me know:

// When screen is less than 544 px, or 'mobile':
// When icon is clicked,
$('a').click(function(){
// Get div with matching class of this element's ID
// Append that div after this anchor element
// When screen is 544px or greater:
// When icon is clicked,
// Get div with matching class of this element's ID
// Append it after this anchor element's row
}); // end SERVICES function