If you are willing on using jQuery then i would suggest you to have a look on the QuickFlip 2
If not i've got a simple answer here for you.
Wrap both divs into a parent one and make the parent one flip on the button click.
Here is a working example for you.
You will still need to make some changes as once you flip the parent div the child divs doesn't flip anymore until you flip the parent again, but this can be fixed easily.
<div class="flip-toggle">
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="image01.jpg">
</div>
<div class="back"></div>
</div>
</div>
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="image02.jpg">
</div>
<div class="back"></div>
</div>
</div>
</div>
<button onclick="document.querySelector('.flip-toggle').classList.toggle('flip');">Toggle Flip</button>