JQuery столбец обратной строки при событии

Question

Я хочу инвертировать положение двух столбцов, когда событие наступит, право будет слева и наоборот;

  <div class="row">
          <div class="col-6 d-flex align-items-center justify-content-center ">
            <div class="logo-centered" id="logo_auth">
              <a href="#default">
                <img src="assets/img/baladiaty-t.svg" alt="logo">
              </a>
            </div>
          </div>
          <div class="col-6 d-flex align-items-center justify-content-center">
            <div class="v1-slogan" id="v1_slogan">
              <h3>Spécial covid-19</h3>
            </div>
          </div>
        </div>

---

.logo-centered{
  width: auto !important;
}

Answer 1

Поскольку строка Bootstrap использует flexbox для разметки, вы можете воспользоваться свойством order flebox, чтобы поменять порядок столбцов. Фактически, Bootstrap предоставляет классы заказов, которые вы можете добавить к элементам .

Неясно, как прослушивается событие, которое вы хотите инициировать переупорядочением, но в основном в событии Для обратного вызова слушателя вы можете просто добавить класс order-1 к столбцу, который вы хотите отобразить первым, а затем order-2 к столбцу, который должен появиться вторым.

См. пример проверки концепции ниже, используя разметка, которую вы предоставили. Вы можете нажать на кнопку, чтобы обменять ордер:

document.getElementById('btn').addEventListener('click', () => {
  document.getElementById('logo-col').classList.toggle('order-2');
  document.getElementById('slogan-col').classList.toggle('order-1');
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<button type="button" class="btn btn-primary" id="btn">Click to swap column order</button>
<br /><br />
<div class="row">
  <div class="col-6 d-flex align-items-center justify-content-center" id="logo-col">
    <div class="logo-centered" id="logo_auth">
      <a href="#default">
        <img src="https://via.placeholder.com/200x100?text=Logo" alt="logo">
      </a>
    </div>
  </div>
  <div class="col-6 d-flex align-items-center justify-content-center" id="slogan-col">
    <div class="v1-slogan" id="v1_slogan">
      <h3>Spécial covid-19</h3>
    </div>
  </div>
</div>