JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-3 col-xs-12 col-sm-6 person">

</div>
<div class="col-md-3 col-xs-12 col-sm-6 person">

</div>
<div class="col-md-3 col-xs-12 col-sm-6 person">

</div>
<div class="col-md-3 col-xs-12 col-sm-6 person">

</div>
<div class="col-sm-12" id="chosen-block"></div>

CSS

.block{
    padding:10px;
    background: blue;
    border:1px solid white;
}
#chosen-block{
    padding:10px;
    background: black;
}

JavaScript

jQuery(window).resize(function(){
	if(jQuery(window).width() < 768){
    	jQuery(".block:first").after(jQuery("#chosen-block"));
    }else{
    	jQuery(".block:last").after(jQuery("#chosen-block"));
    }
})