I've been searching and reading everything I can on using AT with Panels but I seem to be missing some critical piece of understanding and am stuck. I would appreciate it if you could get me going in the right direction. :)

I am creating a custom front page in Page Manager / Panels. I need this to look different based on whether it's being viewed on a desktop/tablet or phone. I see in the AT theme settings that I can select different Panels layouts based on device but I don't understand how changing the layout globally works with Panels? Each page variant has a layout attached to it and content is placed based on that layout. If I say that sitewide every page will use a different layout, that seems like it would just be a mess. How would it know what content to put where in the other layout?

It seems to me that I need something in Page Manager that lets me select a variant based on screen size. Or am I totally looking at this wrong? I am not a themer and have just started looking at responsive design so am feeling rather overwhelmed. I saw AT works with Panels so I thought that was an easy route for me since I already use Panels but clearly I am not getting how this works.

Thanks,

Michelle