Reordering

by RaysOfTheSun

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
	<div class="row">
		<div class="col-sm-12 col-md-4 h-100 bg-red">
			<p>A</p>
		</div>
		<div class="col-sm-12 col-md-4 w-100 h-100 order-md-2 bg-blue" id="div-b">
				<img src="https://images.unsplash.com/photo-1459664018906-085c36f472af?			format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1087&h=725&q=80" class="small-img">		
		</div>
		<div class="d-block h-100 w-100"></div>
		<div class="col-sm-12 col-md-4 w-100 bg-green order-md-1">
			<p>C</p>
		</div>
	</div>
</div>

CSS

.bg-blue {
	background-color: blue;
}

.bg-green {
	background-color: green;
}

.bg-red {
	background-color: red;
}

.small-img {
	height: 300px;
	width: auto;
}


@media only screen and (min-width: 723px) {
	#break {
		display: none;
	}
}