Видео не останется на 2-й колонке строки начальной загрузки

Question

У меня есть видео, которое в ряд. Я хочу, чтобы он оставался справа от страницы как 2-й столбец строки. Но он продолжает появляться под первым столбцом, как будто это вторая строка.

вот мой код:

<section class="container-fluid aboutus">
  <div classs="row">
    <div class="col-sm-5">
        <h1>Our Mission</h1> 
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
        <div class="button">
            <a href="#"><button type="button" class="btn btn-outline-primary btn-lg">Read more</button></a>
        </div>
    </div>

    <div class="col-sm-7 video">
        <div>
            <video autoplay muted loop width="550">
            <source src="video/Markcard.m4v" type="video/mp4" />
        </video> 
        </div>

    </div>
  </div>

</section>  

Answer 1

Первый выпуск: измените <div classs="row"> на <div class="row">
Второй выпуск: col-sm-* будет работать только с небольшими устройствами, которые вы хотите использовать и с другими устройствами.В приведенном ниже примере я просто использовал col-*

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<section class="container-fluid aboutus">
  <div class="row">
    <div class="col-5">
        <h1>Our Mission</h1> 
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
        <div class="button">
            <a href="#"><button type="button" class="btn btn-outline-primary btn-lg">Read more</button></a>
        </div>
    </div>

    <div class="col-7 video">
        <div>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/xcJtL7QggTI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </video> 
        </div>

    </div>
  </div>

</section>  

Answer 2

Самый простой способ сделать это с помощью макета CSS Flex-Box. Вот ссылка на учебник, если вы не знаете, с чего начать.

https://www.w3schools.com/css/css3_flexbox.asp