JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  
  <div class="row">
    <div class="col-xs-6 grey"> col 1</div>
    <div class="col-xs-6 grey"> col 2</div>
    <div class="col-xs-6 grey"> col 3</div>
    <div class="col-xs-6 grey"> col 4</div>
  </div>
  
  <div class="row rowoverlay">
    <div class="col-xs-4 col-xs-offset-4 red coloverlay">
      This is the col that should be on top of the rest
    </div>
  </div>
  
</div>

CSS

.rowoverlay{
  position: absolute;
  top: 0;
}

.coloverlay{
  background-color: rgba(233, 33, 33, .4);
  border: 1px solid red;
}

.grey, .red{ min-height: 50px; margin-bottom: 10px; }
.grey{ background-color: lightgrey; }
.red{ background-color: lightred; }