-1

I have three divs like below

<div class="col-lg-4"> A</div>
<div class="col-lg-4"> B </div>
<div class="col-lg-4"> C </div>

Basically for xs devices, it becomes like

A

B

C

However, I want it like

A

C

B

How can I do that?

Madalina Taina
  • 1,968
  • 20
  • 26
Hello Universe
  • 3,248
  • 7
  • 50
  • 86
  • Well, it seems like so. However, other stackoverflow question is not exactly the same as this. The example one divides into 2/2 (with the 2nd right column dividing again into 2/2 vertically). That is much different than what I need where all are vertically aligned. Using the pull/push does not work for my case. Thank you – Hello Universe Aug 13 '16 at 13:53

4 Answers4

1

Use JavaScript sort() function:

Example: (do not copy/paste)

var obj = [];
var example = ["A", "C", "B"];
$.each($("div"), function(index, value) {
  
  obj[index] = $(this);
});

obj.sort(function(a, b) {
  var A = example.indexOf(a.text().trim());
    var B = example.indexOf(b.text().trim());
      if (A < B) {
    return -1;
    }
    if (A > B) {
    return 1;
    }
    return 0;
});

$("body").prepend(obj);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-4"> A</div>
<div class="col-lg-4"> B </div>
<div class="col-lg-4"> C </div>

Use it to learn not to copy ;-)

  • I guess javascript is the only solution for this. I was thinking of using something similar too. However, I was hoping there already is some unknown bootstrap class I am not aware of that can do this for me without having to add more javascript – Hello Universe Aug 13 '16 at 13:55
  • Sorry JQ, not CSS :) Stupid me –  Aug 13 '16 at 13:55
  • @HelloUniverse Hi, it depens, you can get much more clean result with JQ/JS or even JS along, data() is an very good option. CSS only solution are in the wild but some not very well supported. –  Aug 13 '16 at 13:56
1

In bootstrap this is easy to solve this in html:

<div class="row">
    <div class="col-lg-4 col-xs-12"> A</div>
    <div class="col-lg-4 col-lg-push-4 col-xs-12"> C </div>
    <div class="col-lg-4 col-lg-pull-4 col-xs-12"> B </div>
</div>

https://jsfiddle.net/MadalinaTn/x2w9nw9s/

3rdthemagical
  • 5,271
  • 18
  • 36
Madalina Taina
  • 1,968
  • 20
  • 26
  • hmm I thought the same.. Must be a bug in my code... some other css code inside the div. Thanks. Yes My question is definitely a repeat then. – Hello Universe Aug 13 '16 at 14:08
0

Swap B and C code lines and you are done.

Alexandre Martin
  • 1,472
  • 5
  • 14
  • 27
0

You can order your divs with css Using the order property.

    <div class="col-lg-4" id="A"> A</div>
    <div class="col-lg-4" id="B">  B </div>
    <div class="col-lg-4" id="C"> C </div>

The CSS

    #A{order:1;}
    #B{order:3;}
    #C{order:2;}

If you want that for different screen size to be something else just use media queries!