MarkNsu MarkNsu - 1 year ago 152
CSS Question

Bootstrap grid - change the order in mobile

I have bootstrap row with four

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
methods for doing things like this?

enter image description here

Answer Source

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

body {
  background: #ccc;

.black {
  height: 200px;

.white {
  background: white;

.black {
  background: black;
<link href="" 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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download