The two menus below both have identical HTML but are presented differently depending on their current width. At a 'typical' browser width and font size the menu in the smaller column simply lists the links. In the larger column it displays extra images and lays out the options in a grid.
<ul class="my-list" data-squery="min-width:30em=wide">
data-squery attribute above causes a class value of
wide to be added to the element when it is wider than 30 ems, and extra CSS is applied to the element based on that class value.
Currently you can use