JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="content">
  <nav> ... </nav>
  <!-- height not fixed -->
  <div class="container-fluid eye-catcher">
    <div class="row flex-row">
      <div class="col-sm-8 left"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas consectetur obcaecati id ducimus perferendis velit iure similique, temporibus delectus inventore voluptatibus odio, dignissimos, recusandae quam fugit tenetur eveniet cum officiis! Architecto maiores, quibusdam, nisi blanditiis officiis esse voluptas iure autem perspiciatis iusto. Laboriosam iure quidem optio commodi minima. Perspiciatis, velit! <br><br></div>
      <div class="col-sm-4 image"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim aspernatur minima ratione ut, similique quaerat consequuntur rerum culpa incidunt iusto? </div>
    </div>
  </div>
</div>

CSS

.content {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

nav {
  padding: 10px;
  border: 1px solid black;
}

.image {
  background: lightblue;
}

.left {
  background: lightgreen;
}

@media(min-width: 768px) {
  .eye-catcher {
    flex: 1;
    border: 1px solid black;
    display: flex;
    width: 100%;
  }
  .flex-row {
    display: flex;
    flex: 1;
  }
}