Edit in JSFiddle

$grid-color: #fa0087;
.navbar {
 position: fixed;
 top:0px;
 width: 100%;;
 z-index:7
}
.gutter p {
 position: absolute;
 bottom:25px;
}
button.btn-success {
  position: absolute;
  left: 45%;
  bottom: 0;
	z-index: 333;
}

  .first,.two,.three,.four,.five,.six,.seven,.eight,.nine,.ten,.eleven,.last  {
  display: none;
}
.wrapper{
  height: 100vh;
  z-index: 222;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-flex-direction: row;
  flex-direction: row;
  .first,.two,.three,.four,.five,.six,.seven,.eight,.nine,.ten,.eleven,.last {
    display: flex;
    height: 100vh;
    width: 12%;
    border-left: .2rem solid $grid-color;
    border-right: .2rem solid $grid-color;
    -webkit-flex: 1;
    flex: 1;
		z-index:222;
  }
  .gutter {
    margin: 0px 15px;
		display: flex;
    height: 100vh;
    width: 12%;
    border-left: 1px inset $grid-color;
    border-right: 1px inset $grid-color;
    -webkit-flex: 1;
    flex: 1;
  }
}
.container div.first {
	border-left: .4rem solid $grid-color;
	}
	.container div.last {
		border-right: .4rem solid $grid-color;	
	}
<section class="container">
  <div class="wrapper">
    <div class="first">
      <div class="gutter">
        <p>col-1</p>
      </div>
    </div>
    <div class="two">
      <div class="gutter">
        <p>col-2</p>
      </div>
    </div>
    <div class="three">
      <div class="gutter">
        <p>col-3</p>
      </div>
    </div>
    <div class="four">
      <div class="gutter">
        <p>col-4</p>
      </div>
    </div>
    <div class="five">
      <div class="gutter">
        <p>col-5</p>
      </div>
    </div>
    <div class="six">
      <div class="gutter">
        <p>col-6</p>
      </div>
    </div>
    <div class="seven">
      <div class="gutter">
        <p>col-7</p>
      </div>
    </div>
    <div class="eight">
      <div class="gutter">
        <p>col-8</p>
      </div>
    </div>
    <div class="nine">
      <div class="gutter">
        <p>col-9</p>
      </div>
    </div>
    <div class="ten">
      <div class="gutter">
        <p>col-10</p>
      </div>
    </div>
    <div class="eleven">
      <div class="gutter">
        <p>col-11</p>
      </div>
    </div>
    <div class="last">
      <div class="gutter">
        <p>col-12</p>
      </div>
    </div>
  </div>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Ben's Demo</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </nav>
  
  <button class="btn btn-success">Hide & Show</button>
</section>
$("button.btn-success").click(function() {
  $(".wrapper").toggle('slow');
});