In creating reusable components for communities I have come up against a bit of a challenge with layout. Let's say I am designing a simple table. When a user places this table in a main layout column, I would like it to display as a normal table does. However, if placed in a sidebar or viewed on a narrower device it should reflow to display rows as cards. A responsive layout with respect to viewport size can be accomplished with media queries, but CSS does not support element queries yet.
Has anyone solved this problem in lightning in a reusable fashion or had luck bringing in a third party library such as EQCSS (http://elementqueries.com/) to accomplish this? Is current best practice to have a design attribute that users must choose their layout type instead of it being dynamically determined based on placement?
They made the media queries even easier to access with the visibility classes.
You can use the combination of below classes to hide or show items.
you can display your results in three different items
large and medium tables
really small cards
hope this helps.