Как сделать так, чтобы 2 адаптивных контейнера отображались рядом на рабочем столе и располагались сверху на мобильном устройстве?

Кажется, я не могу найти способ переместить текст абзаца/описания вправо от видео. Я хочу, чтобы он располагался под видео (отзывчивым) при использовании мобильного устройства.

https://jsfiddle.net/48xzvyrs/

Я пробовал использовать метод встроенного блока, выравнивание текста, ничего не дает! Пожалуйста, покажите мне пример кода, что я могу сделать, чтобы это исправить!

CSS

@import url('https://fonts.googleapis.com/css?family=Work+Sans:200');
h1 {
    color: #8A8A8A;

}

p{
    color: black;
    font-size:1.2vw;

}

#roundCorners1 {
  width: 100%;
  display: inline-block;
}

.clearfix {
  overflow: auto;
}

.video {
  border: 5px;
  border-style: none solid none none;
  border-color: blue;
  display: inline-block;
  margin-bottom: 25px;
  height: 300px; width: 600px; padding-right:5%;
}
.paragraph {
 display: inline-block;
  margin-bottom: 25px;
  height: 300px; width: 600px;
}
/* The block of code below tells the browsers what to do on a screen that has a width of 320px or less */

@media screen and (max-width: 320px) {

  .video {
  width: 90%;
  display: block; /* Stops it from floating */
  margin: auto; /* Ensures that it is centered */
  margin-bottom: 25px; /* Space between the stacked elements */

  }

   .paragraph {
  width: 90%;
  display: block; /* Stops it from floating */
  margin: auto; /* Ensures that it is centered */
  margin-bottom: 25px; /* Space between the stacked elements */

  }


   #rightBorder {
  width: 100%;
  display: block; /* Stops it from floating */
  margin: auto; /* Ensures that it is centered */
  margin-bottom: 25px; /* Space between the stacked elements */

  }


}

HTML

<div class = "container" style = "
background-color:white; 
padding-bottom: 30px;
font-family: 'Work Sans', sans-serif;"
id = "rightBorder">

<div class = "clearfix">
<h1 style = "text-align:right; padding-right:5%;margin-top: 0px;">Episode 1</h1>

<div class = "video">
<div style = "width: 100%; max-width: 600px; max-height: 392px; padding-right:5%;"><div style = "position: relative; padding-bottom: calc(56.25% + 55px); width: 100%; display: inline-block;"><iframe frameborder = "0" scrolling = "no" allowfullscreen allow = "autoplay" src = "https://sermons.faithlife.com/embed/sermons/374580" style = "position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
</div>

<div class = "paragraph">
<p> 
<br> Listen to Scott Lindsay's insight on local churches in Bellingham
<br> Listen to Scott Lindsay's insight on local churches in Bellingham
<br> Listen to Scott Lindsay's insight on local churches in Bellingham
<br> Listen to Scott Lindsay's insight on local churches in Bellingham
<br>Listen to Scott Lindsay's insight on local churches in Bellingham
<br> Listen to Scott Lindsay's insight on local churches in Bellingham
<br> Listen to Scott Lindsay's insight on local churches in Bellingham
<br> Listen to Scott Lindsay's insight on local churches in Bellingham
<br> Listen to Scott Lindsay's insight on local churches in Bellingham
<br>
</p>
</div>



</div>
<br><br>