Bootstrap 4 и использование Flex Grid. Пример реализации Flex, наглядно и просто к применению на сайте.
Интересный пример реализации Flexbox в Bootstrap 4. Собственно все на самом деле просто и практически ни чем не отличается от чистой реализации. Ниже привожу сам пример в полном виде.
Ширину в демо немного уменьшил, что бы видно было, но думаю понятен весь ход.
HTML
<header role="banner"> <h1>Bootstrap 4 - Flexbox Grid</h1> </header> <div class="container-fluid"> <h2>extra small</h2> <div class="row"> <div class="col-xs-6">left</div> <div class="col-xs-6">right</div> </div> <h2>small</h2> <div class="row"> <div class="col-sm-6">left</div> <div class="col-sm-6">right</div> </div> <h2>medium</h2> <div class="row"> <div class="col-md-4">left</div> <div class="col-md-4">mid</div> <div class="col-md-4">right</div> </div> <h2>large</h2> <div class="row"> <div class="col-lg-4">left</div> <div class="col-lg-4">mid</div> <div class="col-lg-4">right</div> </div> <h2>extra large</h2> <div class="row"> <div class="col-xl-4">left</div> <div class="col-xl-4">mid</div> <div class="col-xl-4">right</div> </div> </div>
CSS
// demo styles
header { background: #563d7c; padding: 2em 1em; color: #fff; margin-bottom: 2em; h1 { font-weight: 200; } } [class*="row"] { margin-bottom: 1em; } [class*="col-"] { padding-top: .75rem; padding-bottom: .75rem; background-color: rgba(86, 61, 124, 0.15); border: 1px solid rgba(86, 61, 124, 0.2); width: 100%; }
Демонстрация