Twitter Bootstrap Question posted in

Twitter bootstrap – Change sort order of col-Classes for different device resolutions

I am trying to set up a different sort order on an tablet size resolution than on a normal desktop size resoltion using Twitter Bootstrap 3.

My structure looks something like this:

<div class="row">
    <div class="col-lg-3">
        <div>A</div>
        <div>B</div>
    </div>
    <div class="col-lg-6">
        <div>C</div>
        <div>D</div>
    </div>
    <div class="col-lg-3">
        <div>E</div>
        <div>F</div>
    </div>
</div>

The divs inside the columns are displayed below each other so the result on a full sized screen looks like this:

A|C|E
B|D|F

However, all areas can have different heights, which is intended behaviour.

If I look at the layout on a smaller display it looks like this:

A
B
C
D
E
F

Is there a way to cleverly change the layout on smaller devices to:

C
E
A
D
F
B

Thanks for you help!

Tags:

2

Answers


  1. 0

    You can print out the code twice, and use Bootstrap *-hidden on them to sort them the way you want.
    It does have it’s drawbacks, since you are printing the content out twice, even you show it only once, but that’s for you to decide if it’s worth it or not.

    <!-- Visible only on small -->
<div class="row visible-sm">
    <div class="col-lg-3">
        <div>C</div>
        <div>E</div>
    </div>
    <div class="col-lg-6">
        <div>A</div>
        <div>D</div>
    </div>
    <div class="col-lg-3">
        <div>F</div>
        <div>B</div>
    </div>
</div>

    See Fiddle for full example
    https://jsfiddle.net/rkk4qpzb/

    Login or Signup to reply.
  2. 0

    Column ordering (using col-*-(pull|push)) does not work when all columns are full-size (-12) as on mobile devices. It adds a relative positioning to the pushed/pulled columns, but only in a left/right direction (e.g. col-xs-pull-9 adds a right:75% styling).

    Furthermore, you can not reorder the divs as you want as long as they are not all columns (A,B, C,D and E,F are in single columns). You would have to make them all columns.

    What you can use is display:flex with order: on the items:

    ul { display: flex; flex-direction: column; list-style: none; }
li { display: block; order: 1 }
@media screen and (max-width: 768px) {
  #A { order: 3 }
  #B { order: 6 }
  #C { order: 1 }
  #D { order: 4 }
  #E { order: 2 }
  #F { order: 5 }
}
    <ul>
  <li id="A">A</li>
  <li id="B">B</li>
  <li id="C">C</li>
  <li id="D">D</li>
  <li id="E">E</li>
  <li id="F">F</li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search