html - CSS:类似 Youtube 的视频页面布局

Question

手机版youtube视频页面，内容如下:

• 视频
• 相关视频
• 评论

但在网络浏览器桌面版中，相关视频变成了视频和评论部分的侧边栏。

他们是怎么做到的？他们的源代码太复杂了，我搞不懂。可以使用 css 网格或 flexbox 以某种方式完成吗？

所以，起点是:

HTML

<div id="video">Video</div>
<div id="related">Related Videos</div>
<div id="comments">Comments</div>

CSS

#video {}
#related {}
#comments {}

@media (max-width:768px) {
    #video {}
    #related {}
    #comments {}
}

非常感谢

编辑

我猜它不安全，但它满足了我的需要:

CSS

@media (max-width:768px) {
    #container * {display:block;}
}

HTML

<table id="container">
    <tr>
        <td>
            <h3>Topic Title</h3>
            <p>Non-fixed height content</p>
        </td>
        <td rowspan="2">
            <h3>Related topics</h3>
            <p>Topic title 1</p>
            <p>Topic title 2</p>
            <p>Topic title 3</p>
            <p>Topic title 4</p>
            <p>Topic title 5</p>
            <p>Topic title 6</p>
        </td>
    </tr>
    <tr>
        <td>
            <h3>Comments</h3>
            <p>Comment 1</p>
            <p>Comment 2</p>
            <p>Comment 3</p>
        </td>
    </tr>
</table>

Answer 1

可以使用 flex order 和 float 来完成

<div class="content">
    <div class="recommended">Recommended</div>
    <div class="video">Video</div>
    <div class="comments">Comments</div>
</div>

.content {}
    .recommended {float:right;}
    .video {}
    .comments {}

@media (max-width:768px) {
    .content {display:flex;flex-direction:column;}
        .recommended {order:2;}
        .video {order:1;}
        .comments {order:3;}
}

https://jsfiddle.net/09jnamna/