so bootstrap4

by Doeke Wartena

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<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-lg-8">
    <div class="col-xs-12 col-lg-6">Foo<br/>Foo<br/>Foo<br/>Foo</div>
    <div class="col-xs-12 col-lg-6">Bar<br/>Bar<br/>Bar<br/>Bar</div>
    <div class="col-xs-12 col-lg-6">Ham<br/>Ham<br/>Ham<br/>Ham</div>
    <div class="col-xs-12 col-lg-6">Jam<br/>Jam<br/>Jam<br/>Jam</div>
  </div>
  
</div>

SCSS

#title {
    background-color: aqua;
}

#menu {
  background-color: aquamarine;
}

.content {
  background-color: orange;
}

// Small devices (landscape phones, 34em and up)
@media (max-width: 33.9em) { 
  body {
    background-color: rgba(10,10,200,0.2);
  }
}

// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { 
  body {
    background-color: rgba(10,10,200,0.1);
  }
}

// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { 
  body {
    background-color: rgba(10,10,200,0.2);
  }
}

// Large devices (desktops, 62em and up)
@media (min-width: 62em) { 
  body {
    background-color: rgba(10,10,200,0.3);
  }
}

// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { 
  body {
    background-color: rgba(10,10,200,0.4);
  }
}