Не применяются классы col-md-9 (3), что не так?

В курсе по bootstrap 3, урок 8, необходимо расположить сверху красный блок, а ниже зеленый рядом с черным в соотношении 9 к 3. 

Пишу код как в уроке, а блоки все равно находятся друг под другом (красный, ниже зеленый, ниже черный. 

В других аналогичных вопросах был ответ про то что нужно ставить класс col-mg-* или col-sm-*. Попробовала, не помогает. Бутстрап подключен, классы row. container работают.

   <div class="container-fluid" style="background-color: red; height:100px">
      <div class="row">
        <h1>Привет, мир!</h1>
        <div class="col-sm-9" style="background-color:green; height:100px">
          
        </div>
        <div class="col-sm-3" style="background-color:black; height:100px">
         
        </div>
    </div>
  </div>