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?
Best Answer
They made the media queries even easier to access with the visibility classes.
https://www.lightningdesignsystem.com/components/utilities/visibility/#flavor-responsive
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
<table class="slds-medium-show"></table>small cards
<div class="slds-small-show-only"></div>really small cards
<div class="slds-x-small-show-only"></div>hope this helps.