我需要一个有2个IFRAME的布局，在屏幕上可以通过javascript切换而不刷新内容（它们只是改变位置），并且可以调整列的大小。在移动设备上，它们应该是100%宽度堆叠的。
此处绘制示例
[请参阅此处的codepen：][2][2]:https://codepen.io/az3l10/pen/vygvmep
我的问题是，由于DIV位置是绝对的，我不能调整列的大小，如果我改变了位置，我不能切换。
谁能帮忙吗？
如果可以使用CSS Flexbox或CSS Grid实现绝对定位，则不要使用绝对定位。
我们知道我们希望两个元素A和B，出现在我们的站点上，并且这两个元素属于一起。这意味着,我们创建了两个包装在分组元素中的元素：
null
/* Ignore; for demonstration-purposes */
html {height:100%}
body {margin:0;min-height:100%}
#a, #b {min-width:100px;min-height:100px}
#a {background-color:red}
#b {background-color:blue}<div class="wrapper">
<div id="a"></div>
<div id="b"></div>
</div>