MarkNsu MarkNsu - 4 months ago 22
CSS Question

Bootstrap grid - change the order in mobile

I have bootstrap row with four

.col-md-6
divs. So normal screens shows as two sections like this.

enter image description here

When you are switched to mobile, it change it's order to a single column( shows 4 divs under the each div). I have used two colors for divs. First div has a white background color and second div has a black background color like that. Let's see how it looks like on mobile. The first row second div has a black background and the second row first div has a black background so it's showing two black background color div merged way! How can I fix this or is there any available boostrap's
pull
push
methods for doing things like this?

enter image description here

Answer

You can use Bootstrap's Column Re-Ordering classes to achieve this as follows:

body {
  background: #ccc;
}

.white,
.black {
  height: 200px;
}

.white {
  background: white;
}

.black {
  background: black;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-6 white"></div>
  <div class="col-sm-6 black"></div>
  <div class="col-sm-6 col-sm-push-6 white"></div>
  <div class="col-sm-6 col-sm-pull-6 black"></div>
</div>