JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css">
<!-- top bar -->
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
	<button class="navbar-toggler hidden-sm-up pull-xs-right" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar1" aria-controls="exCollapsingNavbar1" aria-expanded="false" aria-label="Toggle navigation">
	&#9776;
	</button>
	<a class="navbar-brand" href="#">Website</a>
	<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar1">
		<!-- <a class="navbar-brand" href="#">Fixed bottom</a> -->
		<div class="nav navbar-nav pull-xs-right">
			<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
			<a class="nav-item nav-link" href="#">Features</a>
			<a class="nav-item nav-link" href="#">Pricing</a>
			<a class="nav-item nav-link" href="#">About</a>
		</div>
	</div>
</nav>

<!-- content -->
<div id='map' class="container-fluid" style='background-color: #f3f3f3;'>
	<div class="row">
		<div class="col-xl-9 col-lg-8 col-md-7 col-sm-6" style='background-color: #dedede;'>
			Column 1
		</div>
		<div class="col-xl-3 col-lg-4 col-md-5 col-sm-6 hidden-xs-down" style='background-color: #aba9a9;'>
			Column 2
		</div>
	</div>
</div>

<!-- bottom bar -->
<nav class="navbar navbar-fixed-bottom navbar-light bg-faded hidden-xs-down">
	<div class="nav navbar-nav">
		<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
		<a class="nav-item nav-link" href="#">Features</a>
		<a class="nav-item nav-link" href="#">Pricing</a>
		<a class="nav-item nav-link" href="#">About</a>
	</div>
</nav>

CSS

body {
			padding-top: 54px;
		}
		
		#map {
			height: 100%;
		}
    
    @media(max-width:544px) {
    .navbar .navbar-nav>.nav-item {
        float: none;
        margin-left: .1rem;
    }
    .navbar .navbar-nav {
        float:none !important;
    }
    .navbar .collapse.in, .navbar .collapsing  {
        clear:both;
    }
}