CSS: Youtube-подобный макет видео страницы

Question

В мобильной версии страницы видео YouTube содержимое выглядит следующим образом:

• Видео
• Похожие видео
• Комментарии

Но в настольной версии веб-браузера Похожие видео превращается в боковую панель справа от разделов Видео и Комментарии.

Как они это сделали?Их исходный код очень сложный, и я не могу понять это.Можно ли это как-то сделать, используя css grid или 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/

Answer 2

Вы можете использовать медиа-запросы.

Работает Пример JSFiddle здесь

@media screen and (min-width: 768px) {
  .video {
    width: 65%;
    float:left;
  }
  .sidebar, .related-video {
    width: 35%;
    float: left;
  }
  .comment {
    width: 100%;
    float: left;
  }
}

/* Hide the related video in screens exceeding 768px */
@media screen and (max-width: 768px) {
   .related-video {
     display: none;
   }
}

Я определил, как CSS должен реагировать, когда экран MINIMUM / шириной не менее 768 пикселей -

• Показать видео на 65% экрана.
• Боковая панель и соответствующее видео в 35%.
• И комментарии в 100%, которые будут на следующей «строке», потому что первые 100% уже заполнены.
• Скрыть похожие видео на экране размером более 768 пикселей.

Вы можете читать по медиа-запросам здесь