JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row row-flex">
     <div class="col-xs-12 col-md-4 col-md-push-8">Блок 1</div>
     <div class="col-xs-12 col-md-8 col-md-pull-4">Блок 2<br />самый<br />высокий<br /><br /></div>
     <div class="col-xs-12 col-md-4">Блок 3</div>
     <div class="col-xs-12 col-md-4">Блок 4</div>
</div>

CSS

.row-flex  {
  display:flex;
  flex-wrap:wrap; 
 }
 div {
   border: solid #CECECE 1px; 
}
div:nth-child(-n+3){
  clear:left;
}