Hello Universe Hello Universe - 3 months ago 11
Sass (Sass) Question

How can I rearrange divs in bootstrap?

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?

Answer

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 ;-)

Comments