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</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<br/>Ham</div>
    <div class="col-xs-12 col-lg-6">Jam<br/>Jam<br/>Jam</div> -->
    <div class="foo">
      <div class="bar">dsfaf</div>
      <div class="bar">fasf</div>
      <div class="bar">asdf</div>
      <div class="bar">adfssf</div>
      <div class="bar">af</div>
      <div class="bar">adf</div>
      <div class="bar">adsf</div>
      <div class="bar">adsf</div>
      <div class="bar">asfasdf</div>  
    </div>
    
    
  </div>
  
</div>

SCSS

#title {  background-color: aqua;}

#menu {  background-color: aquamarine;}

.content { background-color: orange;}

 .foo {
  -webkit-column-count: 3; Chrome, Safari, Opera
  -moz-column-count: 3; Firefox
  column-count: 3;
}
 
 .bar {
  background-color: red;
  width: 100%;
  height: 100px;
  
  -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}


// 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);
  }
}