如何订购外部多个div的div？

Question

浏览器的默认浏览器按此顺序排列。

1. DIV第一
   • 子DIV 1
   • 孩子的div 2
   • 子格3
2. DIV第二
   • 子DIV 1
   • 孩子的div 2

我希望在移动视图此类图书这样的命令。

1. DIV第二

   • 子2
   • 子1
2. DIV第一
   • 子2
   • 子3
   • 孩子1

我试图推行 “订单”，但未能成功。任何帮助是

Answer 1

我希望这可以帮助。现在使用flexbox可以很容易地得到这个结果。

作为分歧的问题，我将它们分开了，因为第一和第二分部的孩子可能有不同的分类名称。

.first-division { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.first-division .child-1 { 
 
    order: 1 
 
} 
 
.second-division { 
 
    display: flex; 
 
} 
 
.second-division .child-1 { 
 
    order: 1 
 
}

<div class="first-division"> 
 
    <div class="child-1">1</div> 
 
    <div class="child-2">2</div> 
 
</div> 
 
<div class="second-division"> 
 
    <div class="child-1">1</div> 
 
    <div class="child-2">2</div> 
 
    <div class="child-3">3</div> 
 
</div>

Answer 2

可以使用白手起家弯曲Order这样

<div class="div-first d-flex"> 
    <div class="order-md-1 order-sm-2 order-2">1</div> 
    <div class="order-md-2 order-sm-1 order-1">2</div> 
</div> 
<div class="div-second d-flex flex-nowrap"> 
    <div class="order-md-1 order-sm-3 order-3">1</div> 
    <div class="order-md-2 order-sm-1 order-1">2</div> 
    <div class="order-md-3 order-sm-2 order-2">3</div> 
</div> 

这将扭转的div的顺序sm和xs设备。如果您需要中型设备的中断点，可以将其更改为order-md-1。