how to use data-equalizer-mq attribute - zurb-foundation-5

Question

i'm new to zurb-foundation-5.on responsive equalizer topic they said
You can specify media queries for which equalizer should activate on. Apply the data-equalizer-mq attribute to the parent container. Set
the value of the attribute to the same media queries you are use to
using in Foundation. If you use an unknown media query, Equalizer will
ignore the media query request. This is particularly useful if you
have set equalize_on_stack to true.
i didn't understand what they said clearly. any one can explain briefly with demo examples.
thank you,

Answer 1

Basically it allows you to equalize the height of elements on your page based on screen size. My answer assumes that you've read and understand how Foundations media queries work.
Lets say you wanted to equalize the height of a row of elements on mobile devices only. You can achieve this by adding the small-only Foundation media query to the data-equalizer-mq attribute like so: data-equalizer-mq="small-only". Your HTML would look something like this:
<!-- Example 1: Equalize height on small screens only. -->
<div class="row" data-equalizer data-equalizer-mq="small-only">
<div class="small-4 columns">
<div class="panel" data-equalizer-watch>
<h1>First panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="small-4 columns">
<div class="panel" data-equalizer-watch>
<h1>Second panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="small-4 columns">
<div class="panel" data-equalizer-watch>
<h1>Third panel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
As you can see from the codepen the height of each panel is different on a large screen as the content within each panel varies in length. However when you drag your browser screen in and it reaches the small-only breakpoint (640px) equalize will activate and the height of each panel will become the same (equalize).
For your reference I've included a second example in the codepen that illustrates the opposite of the above.
Hope that helps.

Answer 2

To add to Thomas
you can also have multiple equalizers that are nested inside each other, you will have to give them names for them to work
<div class="row" data-equalizer="foo">
<div class="medium-4 columns">
<div class="panel" data-equalizer-watch="foo">
<h3>Parent panel</h3>
<div class="row" data-equalizer="bar">
<div class="panel" data-equalizer-watch="bar">
...
</div>
<div class="panel" data-equalizer-watch="bar">
...
</div>
<div class="panel" data-equalizer-watch="bar">
...
</div>
</div>
</div>
</div>
<div class="medium-4 columns">
<div class="callout panel" data-equalizer-watch="foo">
...
</div>
</div>
<div class="medium-4 columns">
<div class="panel" data-equalizer-watch="foo">
...
</div>
</div>
</div>