HTML редактор

<!doctype html>
<html lang="ru">
<head>
    <title>Bootstrap 4 - Смещение адаптивных блоков с помощью классов offset</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link href="/examples/vendors/bootstrap-4/css/bootstrap.min.css" rel="stylesheet">

<style>

.row {
            background-color: #bfbfbf;
        }

.b1, .b2, .b3 {
            height: 50px;
            color: #fff;
            text-align: center;
        }
        .r1 .b1 {
            background-color: #c00000;
        }

.r1 .b2 {
            background-color: #e36c0a;
        }

.r2 .b1 {
            background-color: #ffc000;
        }

.r2 .b2 {
            background-color: #00b050;
        }

.r3 .b1 {
            background-color: #7030a0;
        }
    </style>

</head>
<body>

<div class="container">
    <h1 class="h4 text-center my-4">Bootstrap 4 - Смещение адаптивных блоков с помощью классов offset</h1>

<script src="/examples/vendors/jquery/jquery-3.3.1.min.js"></script>

<script src="/examples/vendors/popper.js/popper.min.js"></script>

<script src="/examples/vendors/bootstrap-4/js/bootstrap.min.js"></script>

</body>
</html>