Bootstrap Column Order 3

Question

How to reorder column in Bootstrap 3?

In Desktop View

[A - 60% block] [B - 40% block]
[C - full block]

In Tablet and Mobile View

[A - long block]
[C - long block]
[B - long block]

HTML Code

<div class="row">
    <div class="col-sm-8">A</div>
    <div class="col-sm-4">B</div>
    <div class="col-sm-12">C</div>
</div>

As a part of best StackOverflow practices, always share your working code, no matter how wrong it is. — Deepak Yadav, Mar 08 '17 at 13:29
Mahi, you can add an extra Duplicate `DIV`, which will be visible in Desktop/mobile and hide it in another `viewport` (just like toggling). Because the layout you want to achieve is not directly possible in Bootstrap, unless you use `position:absolute` property. — Deepak Yadav, Mar 08 '17 at 13:45

score 2 · Answer 1 · edited May 23 '17 at 12:00

html:

<div class="container">
  <div class="row">
    <div id="a" class="col-md-7 col-sm-12 col-xs-12">A</div>
    <div class="reorder-sm">
      <div id="b" class="col-md-5 col-sm-12 col-xs-12">B</div>
      <div id="c" class="col-md-12 col-sm-12 col-xs-12">C</div>
    </div>
  </div>
</div>

css:

@media (max-width: 991px) {
  .reorder-sm {
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
     -ms-transform: rotate(180deg);
     -o-transform: rotate(180deg);
     transform: rotate(180deg);

     direction: rtl;
  }

  .reorder-sm > [class*="col-"] {
    -webkit-transform: rotate(-180deg) translate(0,300%);
    -moz-transform: rotate(-180deg) translate(0,300%);
    -ms-transform: rotate(-180deg) translate(0,300%);
    -o-transform: rotate(-180deg) translate(0,300%);
    transform: rotate(-180deg) translate(0,300%);

    direction: ltr;
  }
}

See fiddle for complete solution. You might also find this similar question helpful.

An alternative solution:

<div id="a" class="col-md-7 col-sm-12 col-xs-12">A</div>
<div id="b1" class="col-md-5 hidden-sm hidden-xs">B</div>
<div id="c" class="col-md-12 col-sm-12 col-xs-12">C</div>
<div id="b2" class="visible-sm visible-xs col-sm-12 col-xs-12">B</div>

I've updated my answer. Please check this for accuracy, @DeepakYadav and mahi. — Craig Mason, Mar 08 '17 at 14:51

Bootstrap Column Order 3

1 Answers1