CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4
Cray
Cray

Reputation: 5483

Column ordering in Bootstrap 4 with push/pull and col-md-12

I've two columns with the class col-md-12 each.

In desktop view they should display like:

Col **1** 
Col **2**

In the mobile view the should display like this:

Col **2**
Col **1**

Is this even possible with the column ordering of Bootstrap?

My current code:

<div class="row">
    <div class="col-xs-push-12 col-md-12">
        Col 1
    </div>
    <div class="col-xs-pull-12 col-md-12">
        Col 2
    </div>
</div>

Upvotes: 18

Views: 54980

Answers (4)

Carol Skelly
Carol Skelly

Reputation: 362430

Update 2021 - Bootstrap 5 beta

The order-* classed work the same way...

<div class="row">
        <div class="col-md-12">
            Col 1
        </div>
        <div class="col-md-12 order-first order-md-0">
            Col 2
        </div>
    </div>

Demo Bootstrap 5

Update 2019 - Bootstrap 4.3+

Now full width, 12 unit col-*-12 columns can be reversed using flexbox ordering.

In older Bootstrap 4 alpha and beta versions the ordering utils were flex-*...

<div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 flex-first flex-md-unordered">
        Col 2
    </div>
</div>

Demo Bootstrap 4 Alpha

As of Bootstrap 4.0.0 the ordering utils are order-*...

<div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 order-first order-md-2">
        Col 2
    </div>
</div>

Demo Bootstrap 4.1.0

See the docs at https://getbootstrap.com/docs/4.0/layout/grid/#order-classes

Upvotes: 25

dippas
dippas

Reputation: 60563

UPDATE (FEB 2018) - v4+

Now that bootstrap has been released, you can achieved that using order utility classes as you were able to do it in beta version (see old update below), with the difference that they've added these 3 new classes:

.order-first {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.order-last {
  -webkit-box-ordinal-group: 14;
  -ms-flex-order: 13;
  order: 13;
}

.order-0 {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
}

Snippet

.p-2 {
  background: red;
  border: white 5px solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column">
  <div class="p-2">1</div>
  <div class="p-2 order-first order-lg-2">2</div>
</div>

OLD UPDATE (OCT 2017) - v4.0.0 beta

With the release of beta version you can do this using flexbox utilities from bootstrap, such as flex-order

(see answer from @ZimSystem - to see solution with alpha version)

.p-2 {
  background: red;
  border: white 5px solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column">
  <div class="p-2">1</div>
  <div class="p-2 order-1 order-lg-2">2</div>
</div>

Upvotes: 27

max
max

Reputation: 8667

You can use flexbox, then you can use media queries to change the order:

.row {
  /* Setup Flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /* Reverse Column Order */
  -webkit-flex-flow: column-reverse;
  flex-flow: column-reverse;
}

CODEPEN

or (default order on mobiles and tablets, reverse on desktop):

@media (min-width: 992px) {
  .row {
    /* Setup Flexbox */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* Reverse Column Order */
    -webkit-flex-flow: column-reverse;
    flex-flow: column-reverse;
  }
}

CODEPEN

Upvotes: 2

Taylor Foster
Taylor Foster

Reputation: 1215

One way around this is to make two versions of Col 2 and put one above Col 1 and one below it. Then use the responsive utilities to hide and show accordingly.

Upvotes: 3

Related Questions