HTML редактор

<!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 3</title>
  
  <link href="/examples/vendors/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .container {
      text-align: center;
      font-size: 40px;
      font-weight: 300;
    }

header .container {
      background: #00b0f0;
      color: #fff;
    }

.main {
      background: #c00000;
      color: #fff;
      min-height: 250px;
    }

.aside-1 {
      background: #00b050;
      color: #fff;
      min-height: 150px;
    }

.aside-2 {
      background: #92d050;
      color: #fff;
      min-height: 100px;
    }

@media (min-width:768px) and (max-width:991.98px) {
      .aside-2 {
        min-height: 150px;
      }
    }

footer .container {
      background: #7030a0;
      color: #fff;
    }
  </style>
</head>

<div class="container">
    <h1 class="h3 text-center" style="margin-top: 30px; margin-bottom: 30px;">Пример адаптивного макета, выполненного с использованием Bootstrap 3</h1>
    <div class="lead text-center" style="margin-bottom: 16px;">
      Текущая контрольная точка:
      <span class="visible-xs-inline">XS</span>
      <span class="visible-sm-inline">SM</span>
      <span class="visible-md-inline">MD</span>
      <span class="visible-lg-inline">LG</span>
    </div>
  </div>

<header>
    <div class="container">
      HEADER
    </div>
  </header>

<section>
    <div class="container">
      <div class="row">
        
        <main class="col-md-8 col-lg-9 main">
          MAIN
        </main>
        
        <div class="col-md-4 col-lg-3">
          <div class="row">
            
            <aside class="col-sm-6 col-md-12 aside-1">
              ASIDE #1
            </aside>
            
            <aside class="col-sm-6 col-md-12 aside-2">
              ASIDE #2
            </aside>
          </div>
        </div>
      </div>
    </div>
  </section>

<footer>
    <div class="container">
      FOOTER
    </div>
  </footer>

</body>

</html>