Zurb foundation accordion CSS breakpoint

Question

I need help figuring out the breakpoint in my zurb foundation code. What the code does it adds both tabs and accordion. Tabs for big screens and accordion view for phones and tablets. However I have yet to figure out how I change the breakpoint(meaning the size where it hides the tab and show the accordion instead).

This is the foundation css file ( to large for stackoverflow ) http://pastebin.com/eSgHmSgK

This is the HTML

<section class="center-menu">
    <div class="center-menu-container">
      <div class="hide-for-small">
        <dl class="tabs" data-tab="">
          <dd class="active" id="#panel1dd" ><a href="#panel1">IT</a></dd>

          <dd id="#panel2dd"><a href="#panel2">Telefoni</a></dd>

          <dd id="#panel3dd"><a href="#panel3">IT-Säkerhet</a></dd>

        </dl>

        <div class="tabs-content">
          <div class="content active" id="panel1">
            <p>This is the first panel of the basic tab example. This is the first
            panel of the basic tab example.</p>
          </div>

          <div class="content" id="panel2">
            <p>This is the second panel of the basic tab example. This is the
            second panel of the basic tab example.</p>
          </div>

          <div class="content" id="panel3">
            <p>This is the third panel of the basic tab example. This is the third
            panel of the basic tab example.</p>
          </div>

        </div>
      </div>

    <dl class="accordion show-for-small" data-accordion>
      <ul class="small-block-grid-1 medium-block-grid-3">
        <li>
          <dd>
            <a href="#panel1c">Accordion 1</a>
            <div id="panel1c" class="content">
              Panel 1. Lorem ipsum dolor
            </div>
          </dd>
          <dd>
            <a href="#panel2c">Accordion 2</a>
            <div id="panel2c" class="content">
              Panel 2. Lorem ipsum dolor
            </div>
          </dd>
          <dd>
            <a href="#panel3c">Accordion 3</a>
            <div id="panel3c" class="content">
              Panel 3. Lorem ipsum dolor
            </div>
          </dd>
        </li>
          </dd>
        </li>
      </ul>
    </dl>

    </div>

    </section>

Thanks in advanced!

Answer 1

In Foundation 5 the tabs are displayed and the accordions are hidden when when @media only screen and (min-width: 40.063em) is reached in the browser; the .hide-for-small displays the tabs and the .show-for-small rule hides the accordions.

/* Medium Displays: 641px and up */
@media only screen and (min-width: 40.063em) {
    .hide-for-small,
    ... {
        display: inherit !important;
    }
    .show-for-small,
    ... {
        display: none !important;
    }
}

Otherwise the .show-for-small rule displays the accordion:

.show-for-small {
    display: inherit !important;
}