Question

我需要在我的移动版本中重新排序div，但我不能在我的父div中使用display：table，因为它会破坏我的响应式布局。我需要在额外的1和2之间切换。

<div class="product-view">
 <form action> </form>
 <div class="box-additional1"></div>
 <div class="box-additional2"></div>
</div>

无法使用此处描述的解决方案：CSS layout, use CSS to reorder DIVs 我应该使用javascript吗？

感谢

Answer 1

您可以通过在父元素上设置display: flex;并使用order重新排序其子元素来实现此目的。请参阅下面的示例（和全屏示例）。

它的作用：

CSS 订单属性指定用于布置弹性项目的顺序在他们的弹性容器中。元素按升序排列订单价值。具有相同订单值的元素列于它们在源代码中出现的顺序。

详细了解Mozilla Developer Network的order财产。

body, html {
  margin: 0;
  padding: 0;
}

.product-view {
  display: flex;
  flex-flow: row wrap;
}

.box-additional1, .box-additional2 {
  width: 100%;
  height: 100px;
  flex-basis: 100%;
}

.box-additional1 {
  background: red;
}

.box-additional2 {
  background: darkRed;
}

@media screen and (min-width: 640px) {
  
  .box-additional1 {
    order: 2;
  }
  
  .box-additional2 {
    order: 1;
  }
}

<div class="product-view">
 <form action> </form>
 <div class="box-additional1"></div>
 <div class="box-additional2"></div>
</div>

Answer 2

你想在动作事件上做这件事吗？如果您需要在动作事件上执行此操作，我建议您使用JQuery。只需使用detach和append：

的组合

var product = $('.product-view');
var first = product.children().eq(1).detach();
var second = product.children().eq(0).detach();
product.append(second);
product.append(first);

请参阅小提琴：https://jsfiddle.net/2vaxg8rp/

不使用显示表重新排序div

2 个答案: