I want to switch columns order using bootstrap and jquerry on click. So I've done this for the left button, but it doesn't work:

$("#left").on("click",
    function() {
        $("#A").removeClass('order-1').addClass('order-2');
        $("#B").removeClass('order-2').addClass('order-1');
        console.log("1 done")
    }, 
    function() {
        $("#A").removeClass('order-2').addClass('order-1');
        $("#B").removeClass('order-1').addClass('order-2');
    }
);

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div  id="left">left</div>
<div  id="right">right</div>


        <div  id="A">one
        </div>
        <div  id="B">two
        </div>

CodePudding user response：

Here you go...

There are a few problems.

1. You tagged this questions as bootstrap-4, but used bootstrap-5 in your code.
2. Bootstrap classes order-1 and order-2 were not even working because you need to wrap col classes with a row class.
3. Use jQuery toggleClass to change classes.

See the snippet below.

$(document).ready(function() {
  $(".col-6").click(function() {
    $("#A").toggleClass("order-1 order-2");
    $("#B").toggleClass("order-2 order-1");
  });
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >
  <div  id="A">one</div>
  <div  id="B">two</div>
</div>