jazlalli/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="Responsive Layout">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Responsive Layout (3-col -> mobile)</title>
</head>
<body>
  <div class="wrapper">
    <div class="box a">Primary Navigation</div>
    <div class="box b">CTA Button</div>
    <div class="box c">Left Controls</div>
    <div class="box d">
      <p>Preview</p>
      <p>Preview</p>
      <p>Preview</p>
      <p>Preview</p>
      <p>Preview</p>
    </div>
    <div class="box e">Right Controls</div>
    <div class="box f">nothing</div>
    <div class="box g">Preview Selector</div>
    <div class="box h">nothing</div>
  </div>
</body>
</html>

## jsbin.kaxonig.css
body {
  padding: 0 40px;
  background-color: #eee;
}

.wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns:
    [col1] minmax(160px,1fr)
    [col2] minmax(auto, 3fr)
    [col3] minmax(160px,1fr);
  grid-template-rows: [row1] 66px [row2] auto [row3] 66px;
  column-gap: 30px;
  color: #444;
}

.box {
  background-color: mediumseagreen;
  color: #fff;
  border: 1px solid black;
  font-size: 150%;
}

.a {
  grid-column: col1 / span 2;
  grid-row: row1;
}
.b {
  grid-column: col2 span 1;
  grid-row: row1;
}
.c {
  grid-column: col1 / span 1 ;
  grid-row: row2 ;
}
.d {
  text-align: center;
  grid-column: col2 / span 1;
  grid-row: row2 ;
}

.g {
  text-align: center;
}

.e {
  grid-column: col3 / span 1;
  grid-row: row2;
}

.f, .h {visibility: hidden;}

@media screen and (max-width: 1024px) {
  body {background-color: lightsalmon;}
  .wrapper {
    height: 100%;
    overflow: hidden;
    grid-template-columns: [col1] 100%;
    grid-template-rows:
      60px
      90vh
      320px
      60px;
    column-gap: 0;
    row-gap: 0;
  }
  .box {
    grid-column: col1;
    grid-row: auto;
  }
  .b {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 1;
    grid-row: 4;
  }
  .e {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    height: 280px;
    grid-row: 3;
    transiton: transform .3s ease-out;
    transform: translateY(0%);
  }
  .c, .f, .g, .h {display: none;}
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Responsive Layout">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Responsive Layout (3-col -> mobile)</title>
	</head>
	<body>
	<div class="wrapper">
	<div class="box a">Primary Navigation</div>
	<div class="box b">CTA Button</div>
	<div class="box c">Left Controls</div>
	<div class="box d">
	<p>Preview</p>
	<p>Preview</p>
	<p>Preview</p>
	<p>Preview</p>
	<p>Preview</p>
	</div>
	<div class="box e">Right Controls</div>
	<div class="box f">nothing</div>
	<div class="box g">Preview Selector</div>
	<div class="box h">nothing</div>
	</div>
	</body>
	</html>
	body {
	padding: 0 40px;
	background-color: #eee;
	}

	.wrapper {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: grid;
	grid-template-columns:
	[col1] minmax(160px,1fr)
	[col2] minmax(auto, 3fr)
	[col3] minmax(160px,1fr);
	grid-template-rows: [row1] 66px [row2] auto [row3] 66px;
	column-gap: 30px;
	color: #444;
	}

	.box {
	background-color: mediumseagreen;
	color: #fff;
	border: 1px solid black;
	font-size: 150%;
	}

	.a {
	grid-column: col1 / span 2;
	grid-row: row1;
	}
	.b {
	grid-column: col2 span 1;
	grid-row: row1;
	}
	.c {
	grid-column: col1 / span 1 ;
	grid-row: row2 ;
	}
	.d {
	text-align: center;
	grid-column: col2 / span 1;
	grid-row: row2 ;
	}

	.g {
	text-align: center;
	}

	.e {
	grid-column: col3 / span 1;
	grid-row: row2;
	}

	.f, .h {visibility: hidden;}

	@media screen and (max-width: 1024px) {
	body {background-color: lightsalmon;}
	.wrapper {
	height: 100%;
	overflow: hidden;
	grid-template-columns: [col1] 100%;
	grid-template-rows:
	60px
	90vh
	320px
	60px;
	column-gap: 0;
	row-gap: 0;
	}
	.box {
	grid-column: col1;
	grid-row: auto;
	}
	.b {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60px;
	z-index: 1;
	grid-row: 4;
	}
	.e {
	position: absolute;
	bottom: 60px;
	left: 0;
	right: 0;
	height: 280px;
	grid-row: 3;
	transiton: transform .3s ease-out;
	transform: translateY(0%);
	}
	.c, .f, .g, .h {display: none;}
	}