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="container">
   <div class="right col-xs-12 col-sm-12 col-md-push-6 col-md-6">this should be on the right side and on the top (in small screen size)</div>
  <div class="left col-xs-12 col-sm-12 col-md-pull-6 col-md-6">this should be on the left side and on the bottom (in small screen size)</div>
</div>

CSS

.container{
  border: 1px solid;
}

.right{
  border: 1px dashed red;
}

.left{
  border: 1px dashed green;
}