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

Question

我有两个 div 并排显示内联块，每个都有 45% 的宽度。在某个断点处，它们的宽度都更改为 100%，导致它们堆叠。这显然超级简单。我的问题是：如何更改所述断点处的标记以使底部 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

使用浮动指定 div 的位置，然后切换 html 上的 div，使右边在左边

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

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

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

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

Answer 2

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

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

根据您需要哪些浏览器来支持您的网站，您可以使用 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>

Answer 3

我建议您可以使用显示 flex，因为它们在对齐、定位等方面提供了很多好处。

我已经为您的问题创建了一个解决方案，方法是将 .left 和 .right 包装在一个 flex 容器中，并相应地更改 flex-direction。

.container
{
  display:flex;
  flex-direction:column;
  justify-content:flex-start
}
@media only screen and (max-width: 550px) { 
   .container
  {
    display:flex;
    flex-direction:column-reverse;
    justify-content:flex-start
  }
}

为了更好地理解，我创建了一个工作 fiddle：https://jsfiddle.net/Baliga/pqo69s3t/2/

Answer 4

如果你想要一个不使用 flex 的解决方案，你可以使用 css 实现的唯一方法是进行 div absolute 定位，但是height 和 top|bottom 值必须相应地定义。

否则，使用 javascript 是唯一的方法。示例：

leftDiv = document.getElementById( 'left' );
rightDiv = document.getElementById( 'right' );
fd.parentNode.removeChild( leftDiv );
sd.parentNode.insertAfter( leftDiv, rightDiv );

您可以在特定的视口宽度触发此功能并获取 div 的顺序开关。

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

How to reorder divs / alter markup at breakpoints

html

javascript

css

jquery

media-queries