javascript - 如何在断点处重新排序 div/更改标记

Question

我有两个 div 并排显示 inline-block，每个都有 45% 的宽度。在某个断点处，它们的宽度都更改为 100%，导致它们堆叠。这显然 super 简单。我的问题是:如何更改所述断点处的标记以使底部 div 出现在顶部？

我现有的标记在很大程度上依赖于 inline-block级别显示，我宁愿不要切换到 flexbox此时在整个站点范围内。因此，我正在寻找使用 inline-block 的解决方案.

考虑这个简单的例子:

.left, .right {
  display:inline-block;
  width:45%;
  text-align:center;
}
.left {
  background-color:tomato;
}
.right {
  background-color:aquamarine ;
}
p {
  padding:50px 0;
}

@media only screen and (max-width: 550px) {
 .left, .right {
    width:100%;
 }
}

<div class="left">
  <p>LEFT</p>
</div>

<div class="right">
  <p>RIGHT</p>
</div>

这里的一切都很好，但我想要的结果是 RIGHT div出现在LEFT div 的顶部在断点之后。我显然可以使用 flexbox 实现这一点重新排序 div，但这将需要数小时的工作来切换所有内容以支持此显示属性。我需要一个 inline-block解决方案。想法赞赏。

Answer 1

您可以使用 display: flex; css 属性。基本方法是将父元素(例如容器)设置为 display: flex; 这会生成 flexbox 并允许您为子元素设置不同的参数，例如

  .right{
    order: 1;
  }
  .left{
    order: 2
  }

根据您需要哪些浏览器来支持您的网站，您可以使用 flex-box。检查 flex box 支持 here

.left,
.right {
  display: inline-block;
  width: 50%;
  text-align: center;
}

.left {
  background-color: tomato;
}

.right {
  background-color: aquamarine;
}

p {
  padding: 100px 0;
}

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

@media only screen and (max-width: 550px) {
  .left,
  .right {
    width: 100%;
  }
  .container {
    flex-direction: column
  }
  .right {
    order: 1;
  }
  .left {
    order: 2
  }
}

<div class='container'>
  <div class="left">
    <p>LEFT</p>
  </div>

  <div class="right">
    <p>RIGHT</p>
  </div>
</div>

更新

您可以使用 rotate() 转换函数来获得您想要的结果。下面的工作演示:

.left,
.right {
  display: inline-block;
  width: 45%;
  text-align: center;
}

.left {
  background-color: tomato;
}

.right {
  background-color: aquamarine;
}

p {
  padding: 50px 0;
}

@media only screen and (max-width: 550px) {
  .left,
  .right {
    width: 100%;
  }
  .container {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .container>div {
    display: block;
    margin: 0 auto 5px;
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
  }
}

<div class='container'>
  <div class="left">
    <p>LEFT</p>
  </div>

  <div class="right">
    <p>RIGHT</p>
  </div>
</div>

更新 2 使用 jQuery

$(window).resize(function() {
  if ($(window).width() <= 550) {
    $('.left').remove().insertAfter($('.right'));
  } else {
    $('.left').remove().insertBefore($('.right'));
  }
})

.left,
.right {
  display: inline-block;
  width: 45%;
  text-align: center;
}

.left {
  background-color: tomato;
}

.right {
  background-color: aquamarine;
}

p {
  padding: 50px 0;
}

@media only screen and (max-width: 550px) {
  .left,
  .right {
    width: 100%;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
  <div class="left">
    <p>LEFT</p>
  </div>

  <div class="right">
    <p>RIGHT</p>
  </div>
</div>