I'm trying to make a layout like the following:
On xs devices, I'd like the order to be first-second-third.
The sample code I have is:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<style type="text/css">
div.short { height: 100px; background-color: rgb(174, 199, 232); }
div.medium { height: 200px; background-color: rgb(255, 187, 120); }
div.tall { height: 400px; background-color: rgb(152, 223, 138); }
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 short order-sm-9">
First column (short)
</div>
<div class="col-sm-8 medium order-sm-1">
Second column (medium)
</div>
<div class="col-sm-4 tall">
<p>Third column (tall)</p>
<p>
How to keep this <em>under</em> the first (blue) column
when on <code>sm</code> or larger devices, while
preserving the first-second-thrid order on <code>xs</code>
devices?
</p>
<p>
And why are these narrower columns on the left, rather
than right?
</p>
</div>
</div>
</body>
</html>
