如何让行内引用元素在容器下方显示（响应式适配）

需求背景 #

• 构建技术文档模板，尽可能减少JavaScript依赖
• 宽屏场景：<span class="ref">中的引用需浮动至左侧边距
• 窄屏（移动端）场景：引用需显示在段落或<section>末尾
• 要求<span class="ref">紧邻关联文本，保持HTML语义化，不使用div/table包裹段落

当前问题 #

尝试将段落设为flexbox并调整引用的order属性，虽能将引用移至段落末尾，但会导致span之间的连续文本被渲染为块级元素，出现异常换行，常规CSS技巧无法解决，怀疑该场景暂不支持原生实现（或可借助display: content尝试）

可行解决方案 #

通过CSS Grid结合媒体查询实现，既能保持正文文本正常排版，又能在窄屏时将引用统一移到段落末尾，同时无需修改原有HTML结构：

修改后的CSS代码 #

article {
    margin-left: 25%;
    padding: 5px;
}

main {
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}

section {
    margin-top: 40px;
}

h1 {
    width: calc(125% - 10px);
    margin-left: -25%;
    text-align: center;
}

h2 {
    width: calc(125%);
    margin-left: calc(-33%);
    border-top: 1px solid gray;
    padding-top: 10px;
    padding-left: 40px;
}

span.ref {
    float: left;
    clear: both;
    width: calc(33% - 8px);
    margin-left: -33%;
    hyphens: auto;
    font-size: 14px;
    color: #666;
    text-align: left;
}

@media only screen and (max-width: 500px) {
    article {
        margin-left: 0;
    }

    h1, h2 {
        margin-left: 0;
        padding-left: 0;
        width: 100%;
    }

    /* 用Grid布局拆分段落为正文、引用两个区域 */
    p {
        display: grid;
        grid-template-areas: "content" "refs";
    }

    /* 正文文本自动归入content区域，保持流式排版 */
    p > *:not(.ref) {
        grid-area: content;
    }

    /* 所有引用归入refs区域，统一排列在正文下方 */
    span.ref {
        grid-area: refs;
        float: none;
        margin-left: 0;
        width: 100%;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #eee;
    }

    /* 移除第一个引用的上边距和分隔线 */
    p > span.ref:first-of-type {
        margin-top: 12px;
        padding-top: 0;
        border-top: none;
    }
}

原HTML结构保持不变 #

<body>
    <main>
        <article>
            <h1>Document Title</h1>
            <section>
                <h2>First section of the document</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla porta est nec rhoncus. Vestibulum ultricies molestie ante, vel fringilla turpis tempor at. Maecenas eu leo justo. Aliquam scelerisque metus in massa hendrerit [1], <span class="ref">[1] Wikipedia. </span>non condimentum augue pharetra. Etiam in lorem eu nibh sagittis [2] <span class="ref">[2] A fancy textbook</span> lacinia sit amet eu odio. Quisque ultricies lacinia dignissim. Suspendisse blandit urna justo, et blandit metus tincidunt at. Quisque vel varius enim.
                </p>
                <p>
                    Aenean cursus vestibulum libero, eu vulputate nisi efficitur sit amet. Praesent quis metus ac leo eleifend tempus. Praesent ac mauris eleifend, luctus ligula vel, interdum lectus. Donec iaculis in est non iaculis. Nullam vulputate, lorem quis placerat condimentum, risus lectus feugiat neque, id auctor augue elit ut enim. Donec vel rutrum massa. Nunc laoreet nulla et eleifend facilisis. Morbi scelerisque velit sit amet libero viverra mattis. Vivamus non porta neque, et rhoncus mi. In lectus nisl, faucibus nec sem sed, ullamcorper commodo ante. Aliquam ac massa imperdiet, viverra lacus eget, convallis ex. Phasellus tempus lacinia enim id tincidunt.
                </p>
            </section>
            <section>
                <h2>A second section</h2>
            </section>
        </article>
    </main>
</body>

方案说明 #

1. 宽屏模式：保留原浮动布局，引用左移至侧边距，不干扰正文正常排版
2. 窄屏模式：
   • 段落设为Grid布局，划分content（正文）和refs（引用）两个区域
   • 正文文本自动填充content区域，维持原生流式排版，避免异常换行
   • 所有引用统一归入refs区域，自动排列在正文下方，通过边框和间距区分正文与引用
   • 完全保留原HTML语义结构，<span class="ref">仍紧邻关联文本

内容的提问来源于stack exchange，提问作者Jonathan Wheeler