My layout consists of three elements: top bar, content, and bottom bar.
I'm using Twitter Bootstrap 4.
For mobile view, I want the elements to stack in this order:
top bar
content
bottom bar
For desktop view, I want them to align like this:
content top bar
bottom bar
Here's a visual guide: https://i.sstatic.net/tK8Vu.png
I'm having trouble getting them to line up correctly, and I've hit a roadblock. Any advice from the community would be greatly appreciated!
The code snippet is as follows:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class=container>
<div class=row>
<div class="col-12 col-md-5 order-md-2">
<h3>Top Bar</h3>
</div>
<div class="col-12 col-md-7 order-md-1">
<h3>Content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Praesent ac turpis ac massa mollis posuere.</p>
<p>Duis urna purus, sagittis eget fermentum in, aliquam sed est.</p>
</div>
<div class="col-12 col-md-5 order-md-2 offset-md-7">
<h3>Bottom Bar</h3>
</div>
</div>
</div>
</body>