在移动设备上将部分移动到模态

如何解决在移动设备上将部分移动到模态

所以，假设我有这个标记：

<body>
    <header></header>
    <section id="one">
        <h1>Header 1</h1>
        <div>Text</div>
    </section>
    <section id="two">
        <h1>Header 1</h1>
        <div>Text</div>
        <div id="detachable"></div>
    </section>
    <footer>Links</footer>
</body>

我想在移动设备上将 div#detachable（在 section#two 内）移动到模态，并在桌面上保持原样。我该怎么做？

一切都已经设计好了。我还有模态、打开模态的按钮等。我对其他模态内容所做的就是将它放在 </body> 的正上方，以便它漂浮在其他所有内容的顶部。这些其他实例独立于页面的主要结构，但 div#detachable 位于标记的深处。

谢谢。