JSFiddle - React, Tailwind, and code Playground

HTML

<button id="flipperButton">
Flip
</button>
<div class="container">
  <div id="wrap1" style="order: 0" class="iframe-wrapper">
    <iframe id="iframe1" src="https://google.com"></iframe>
  </div>
  <div id="warp2" style="order: 1" class="iframe-wrapper">
    <iframe id="iframe2" src="https://bing.com"></iframe>
  </div>
</div>

CSS

.container{
  display: flex;
  flex-direction: column;
  /*align-items: flex-start;*/
}
#flipperButton{
  font-size: 24px;
}

JavaScript

var flipper = document.getElementById('flipperButton');
var iframes = document.getElementsByClassName('iframe-wrapper');
console.log(iframes);
flipper.addEventListener("click", function(){
	for (var iframe of iframes) {
    var currentOrder = parseInt(iframe.style.order);
    console.log(iframe, currentOrder);
    if(currentOrder > 0){
    	iframe.style.order = "0";
    } else {
    	iframe.style.order = "1";
    }
  }
}, false);