Что я делаю неверно - bootstrap 3 #9 ?

Задание

С помощью системы Grid System фреймворка Bootstap, задайте классы таким образом, чтобы при увеличении размера браузера (больше 992px), блоки выстроились один слева, другой справа. Правый блок должен иметь 4 колонки и левый блок должен иметь 8 колонок. Остальной код не меняйте. Для увеличения и уменьшения размера браузера, захватите мышкой ползунок и двигайте влево или вправо:

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Bootstrap Grid System</title>
	
    <!-- Подключаем Bootstrap CSS через CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

</head>
<body>
	
	<div class="container">
        <div class="col-xs-12 col-sm-12 color-left-block">
           <h3>Left block</h3> 
        </div>
        <div class="col-xs-12 col-sm-12 color-right-block">
           <h3>Right block</h3> 
        </div>
	</div>
	
	<!-- Подключаем jQuery и Bootstrap JS через CDN -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Решение МОЕ:
Вариант 1 их несколько всего ибо двухсмысленно именно для меня звучит задание"Остальной код не трогаем - ну ок не трогаем так не трогаем":

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Bootstrap Grid System</title>
	
    <!-- Подключаем Bootstrap CSS через CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

</head>
<body>
	
	<div class="container">
        <div class="col-xs-12 col-sm-12 col-md-8 color-left-block">
           <h3>Left block</h3> 
        </div>
        <div class="col-xs-12 col-sm-12 col-md-4 color-right-block">
           <h3>Right block</h3> 
        </div>
	</div>
	
	<!-- Подключаем jQuery и Bootstrap JS через CDN -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Вариант 2:

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Bootstrap Grid System</title>
	
    <!-- Подключаем Bootstrap CSS через CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

</head>
<body>
	
	<div class="container">
        <div class="col-xs-12 col-sm-12 col-md-1 color-left-block">
		<div class="col-xs-12 col-sm-12 col-md-1 color-left-block">
        <div class="col-xs-12 col-sm-12 col-md-1 color-left-block">
		<div class="col-xs-12 col-sm-12 col-md-1 color-left-block">
        <div class="col-xs-12 col-sm-12 col-md-1 color-left-block">
		<div class="col-xs-12 col-sm-12 col-md-1 color-left-block">
        <div class="col-xs-12 col-sm-12 col-md-1 color-left-block">
		<div class="col-xs-12 col-sm-12 col-md-1 color-left-block">
           <h3>Left block</h3> 
        </div>
        <div class="col-xs-12 col-sm-12 col-md-1 color-right-block">
        <div class="col-xs-12 col-sm-12 col-md-1 color-right-block">
        <div class="col-xs-12 col-sm-12 col-md-1 color-right-block">
        <div class="col-xs-12 col-sm-12 col-md-1 color-right-block">
           <h3>Right block</h3> 
        </div>
	</div>
	
	<!-- Подключаем jQuery и Bootstrap JS через CDN -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Вариант 3:

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Bootstrap Grid System</title>
	
    <!-- Подключаем Bootstrap CSS через CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

</head>
<body>
	
	<div class="container">
        <div class="col-xs-8 col-sm-8 col-md-8 color-left-block">
			<h3>Left block</h3>
		</div>
        <div class="col-xs-4 col-sm-4 col-md-4 color-right-block">
			<h3>Right block</h3>
		</div>
	</div>
	
	<!-- Подключаем jQuery и Bootstrap JS через CDN -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

bootstrap

3 ответов

Там кнопка Показать ответ есть справа сверху.

Прошу прощения за мою невнимательность! 1 и 2 вариант уж точно неверные, но 3-й то почему не верен?

Ля , от души братец но я не думал что на столько строго относиться что местами достаточно поменять. я просто так тоже пробовал. только в конце вот так:

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Bootstrap Grid System</title>
	
    <!-- Подключаем Bootstrap CSS через CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

</head>
<body>
	
	<div class="container">
        <div class="col-xs-12 col-sm-12 col-md-8 color-left-block">
           <h3>Left block</h3> 
        </div>
        <div class="col-xs-12 col-sm-12 col-md-4 color-right-block">
           <h3>Right block</h3> 
        </div>
	</div>
	
	<!-- Подключаем jQuery и Bootstrap JS через CDN -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Ну очень тебе благодарен, Друг!