so bootstrap4

by Doeke Wartena

HTML

<div class="container">

  <div id="title" class="col-xs-12 col-md-6 col-lg-4">THE<br/>TITLE</div>  
  <div class="clearfix">
  </div>

  <div id="menu" class="col-xs-12 col-lg-4">MENU<br/>item1<br/>item2<br/>item3</div>

  <div class="content col-xs-12 col-md-6 col-lg-8">
    <div>Foo<br/>Foo<br/>Foo<br/>Foo</div>
    <div>Bar<br/>Bar<br/>Bar<br/>Bar</div>
    <div>Ham<br/>Ham<br/>Ham<br/>Ham</div>
    <div>Jam<br/>Jam<br/>Jam<br/>Jam</div>
    <div>Foo<br/>Foo<br/>Foo<br/>Foo</div>
    <div>Bar<br/>Bar<br/>Bar<br/>Bar</div>
    <div>Ham<br/>Ham<br/>Ham<br/>Ham</div>
    <div>Jam<br/>Jam<br/>Jam<br/>Jam</div>
    <div>Foo<br/>Foo<br/>Foo<br/>Foo</div>
    <div>Bar<br/>Bar<br/>Bar<br/>Bar</div>
    <div>Ham<br/>Ham<br/>Ham<br/>Ham</div>
    <div>Jam<br/>Jam<br/>Jam<br/>Jam</div>
    <div>Foo<br/>Foo<br/>Foo<br/>Foo</div>
    <div>Bar<br/>Bar<br/>Bar<br/>Bar</div>
    <div>Ham<br/>Ham<br/>Ham<br/>Ham</div>
    <div>Jam<br/>Jam<br/>Jam<br/>Jam</div>
    <div>Foo<br/>Foo<br/>Foo<br/>Foo</div>
    <div>Bar<br/>Bar<br/>Bar<br/>Bar</div>
    <div>Ham<br/>Ham<br/>Ham<br/>Ham</div>
    <div>Jam<br/>Jam<br/>Jam<br/>Jam</div>
    <div>Foo<br/>Foo<br/>Foo<br/>Foo</div>
    <div>Bar<br/>Bar<br/>Bar<br/>Bar</div>
    <div>Ham<br/>Ham<br/>Ham<br/>Ham</div>
    <div>Jam<br/>Jam<br/>Jam<br/>Jam</div>
  </div>
  
</div>

SCSS

#title {background-color: aqua;}
#menu {background-color: aquamarine;}
.content {background-color: orange;}