JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
	<div class="row">
			<div class="col-xs-offset-1 col-xs-10 col-md-offset-0 col-md-6 col-md-push-6 first">
					<h2>Title</h2>
					<p>Data</p>
			</div>
				<div class="col-xs-offset-1 col-xs-10 col-md-offset-0 col-md-pull-6 col-md-6 col-lg-offset-1 main-tour">
						<img class="img-responsive center-block" src="https://www.a1smallbusinessmarketing.com/images/prosbo_hires.jpg"/>
				</div>
			<div class="main-tour description">
				<div class="col-xs-12 col-md-5 col-lg-offset-1 items m-t-3">
							<div>1</div>
							<div>2</div>
							<div>3</div>
							<div>4</div>
				</div>
			</div>
		</div>

CSS

@media (min-width:420px) and (max-width:1040px){
  .main-tour{
    float:left;
  }

  .row .first, .row .main-tour{
    display:inline-block;
  }
  .main-tour.description{
    display:block;
    float:none;
  }
}