Getting right column to show up on top of left column - html

Question

I have two columns. Desktop:
Mobile:
This is expected behavior, but I want the column on the left "Browse Programs" to show up on top of the left column, not below it. I've tried a few different things, including reversing the order of columns in HTML and using "float-left" (which works, but not a great solution). I've also used col-md-pull and col-md-push but neither is working.
For what it's worth, I'm not using bootstraps 4 and I'd prefer to keep that as is for now.

Answer 1

Place the blocks inside the layout in the order in which they should go on the mobile.
Introduction: Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries.
Change their order. To do this, Bootstrap 3 provides classes of the type .col-md-push-9 and .col-md-pull-3, and Bootstrap 4 provides the order classes.
Demo for Bootstrap 3: https://codepen.io/glebkema/pen/qBONaQd
/* Demo Decorations */
.row-demo > div {
color: white;
font: bold 20px sans-serif;
padding: 9px 15px 30px;
}
.row-demo > div:first-child {
background: #69c;
}
.row-demo > div:last-child {
background: #c69;
}
<div class="container">
<div class="row row-demo">
<div class="col-md-3 col-md-push-9">Top on mobile / Right on desktop</div>
<div class="col-md-9 col-md-pull-3">Bottom on mobile / Left on desktop</div>
</div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
Demo for Bootstrap 4: https://codepen.io/glebkema/pen/GRpZVZq
/* Demo Decorations */
.row-demo > div {
color: white;
font: bold 20px sans-serif;
padding: 9px 15px 30px;
}
.row-demo > div:first-child {
background: #69c;
}
.row-demo > div:last-child {
background: #c69;
}
<div class="container">
<div class="row row-demo">
<div class="col-md-3 order-md-last">Top on mobile / Right on desktop</div>
<div class="col-md-9 order-md-first">Bottom on mobile / Left on desktop</div>
</div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>