Проблема с структурой шаблона страниц как исправить?

Я не могу поменять блоки местами в 28 задании (домашнее задание)

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Киномонстр Bootstrap</title>
    
    <!-- Подключаем Bootstrap CSS через CDN -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">

    <!-- Подключаем style.css -->
    <link rel="stylesheet" href="style.css">

    <!-- Main Style-->
    <link rel="stylesheet" href="assets/css/style.css">

  </head>
<body>
    
    <div class="container-fluid">
        <div class="row">
       
            <nav role="navigation" class="navbar navbar-inverse">
              <div class="container">

              <div class="navbar-header header">

                <div class="container">
                  
                  <div class="row">

                    <div class="col-lg-12">
                      <h1><a href="#">КиноМонстр</a></h1>
                      <p>Кино - наша страсть</p>
                    </div>
                    
                  </div>

                </div>
                
                <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                  
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>

                </button>


              </div>
                <div id="navbarCollapse" class="collapse navbar-collapse navbar-right">
                    
                    <ul class="nav nav-pills">
                        <li class="active"> <a href="#">Главная</a> </li>
                        <li> <a href="#">Фильмы</a> </li>
                        <li> <a href="#">Сериалы</a> </li>
                        <li> <a href="#">Рейтинг фильмов</a> </li>
                        <li> <a href="#">Контакты</a> </li>
                    </ul>
            
                </div>
              </div>
            </nav> 

        </div>
    </div>


    <div class="wrapper">
      
      <div class="container">
        
        <div class="row">
          
        <div class="col-lg-9 col-push-lg-3">
          
          <h2>Новые фильмы</h2>
          <hr>
          <div class="row">
            <div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
              <img src="assets/img/inter.png" alt="Интерстеллар">
              <div class="film_label">Интерстеллар</div>
            </div>
          </div>


        </div>


        <div class="col-lg-3 col-pull-lg-9">
          aaa
        </div>


        </div>

      </div>

      <div class="clear"></div>

    </div>


    <footer>
      
      <div class="container">
        <p class="text-center"> <a href="http://ru.wh-db.com">WH-DB.COM</a></p>
      </div>

    </footer>

    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="assets/js/bootstrap.min.js"></script>

</body>
</html>

Можете сказать где ошибка?

bootstrap

2 ответов

Спасибо помогло

Вы немного последовательность перепутали в названии классов для pull и push(сначала должно идти lg потом только слово push или pull). Ваш неверный вариант:

<div class="col-lg-9 col-push-lg-3">
<div class="col-lg-3 col-pull-lg-9">

Последовательность в названии классов такое должно быть (верный вариант):

<div class="col-sm-9 col-sm-push-3">
<div class="col-sm-3 col-sm-pull-9">

p.s. я использую как уроке вместо lg, sm.