CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4
DiamondJoe12
DiamondJoe12

Reputation: 1809

Getting right column to show up on top of left column

I have two columns. Desktop:

enter image description here

Mobile:

enter image description here

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.

Upvotes: 1

Views: 462

Answers (1)

Gleb Kemarsky
Gleb Kemarsky

Reputation: 10398

  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.

  2. 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"/>

Upvotes: 2

Related Questions