JQuery 反向行列的事件答案

【问题标题】：JQuery inverse row column's on eventJQuery 反向行列的事件
【发布时间】：2020-04-09 22:12:34
【问题描述】：

我想在事件发生时反转两列位置，右为左，反之亦然；

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

【问题讨论】：

标签： jquery html css twitter-bootstrap

【解决方案1】：

由于 Bootstrap 行使用 flexbox 进行布局，您可以利用 flebox 的 order 属性来交换列的顺序。其实Bootstrap provides order classes that you can add to the elements。

不清楚你要触发重排的事件是如何监听的，但基本上在事件监听器的回调中你可以简单的将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>

【讨论】：