html - 如何重新排序/简化 HTML 代码以在较小的屏幕上显示？

Question

我有一个用于桌面屏幕的两列布局的网页，HTML 是按特定顺序编写的，以实现所需的布局，基本设置如下:

<div>
    <div class="left-column">
        <h1>Heading 1</h1>
        <p>Text here...</p>
    </div>
    <div class="right-column">
        <img>
    </div>
</div>
<!-- columns to sit side by side -->

但是，对于较小的屏幕，必须简化此布局(一列，顶部 > 向下)，但由于 HTML 的原始顺序，我发现很难使用媒体查询重新定位这些元素。对于较小的屏幕，我希望布局如下:

<div>
    <h1>Heading 1</h1>
    <img>
    <p>Text here...</p>
</div>

如您所见，我只想要一个 div 和 <img>在 <h1> 之间移动和 <p>元素。

如何实现这种仅在较小屏幕上显示的替代 HTML 布局？

Answer 1

粗略的解决方案，但这是一个无脚本的解决方案。

在 h1 和 p 之间的左侧 div 中保留一个重复的 img 元素。默认保持 dislay:none。然后，当您希望显示单个列 View 并隐藏其他 img 元素或 right-column div 时，使用媒体查询使其可见。