使用Bootstrap在移动和桌面视图中进行不同的垂直排序

Question

我们需要在移动设备和桌面设备上使用不同的视图，这些视图以红色标记。由于右侧面板具有不同的排序，位置更改为绝对和静态不适用于切换横向（dektop视图）和视口（移动视图）。我们还使用jQuery计算列B的顶部，顺序为1. B和2. A.你能帮助我们解决这个问题，无论是bootstrap还是普通方法？

Answer 1

您可以使用flexbox重新排列布局的内容。

我会做这样的事情：

<div id="columns-container">
    <div id="column1">
        Column1
    </div>
    <div id="column2">
        Column2
    </div>
</div>

在CSS中：

columns-container {
    display:flex;
    flex-direction:column; 
}
column1 {
    order: 1;
}
column2 {
    order:2;
}

@media screen 
    and (device-width: 320px) 
    and (device-height: 640px) {
        column1 {
            order: 2;
        }
        column2 {
            order: 1;
        }
   }

其他选项是在flex-direction: column-reverse中使用@media screen，因此您将颠倒columns-container中所有列的顺序，但如果您维护的话，它很容易维护和更多地控制所包含的div。使用建议的方法。