How to get multiple Facebook Like buttons to show and hide in responsive layout

Question

In my design I'm moving the Like button to the footer at small screen sizes. In Chrome this works dandy by having multiple calls to the widget. In other browsers, the visible Like button hides properly, but the other one doesn't load on resize.

http://jsfiddle.net/isherwood/kc3r2

@media (max-width: 400px) {
    #header .fb-like {display: none;}
    #footer .fb-like {display: block;}
}

<div id="header">
    <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
</div>
<div id="footer">
    <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
</div>

Answer 1

Try using visiblity instead of display:

#footer .fb-like { visibility:hidden; }

@media (max-width: 400px) {
    #header .fb-like { visibility:hidden; }
    #footer .fb-like { visibility:visible; }
}