如何在移动视图中以不同的顺序呈现HTML元素？

Question

我有以下HTML：

<div class="row proadjuster">
  <div class="col-lg-5 propadder"></div>
  <div class="col-lg-7 pro2"></div>
</div>

是否可以确保在移动视图中首先显示col-lg-7？

Answer 1

如果你想用col-lg-7来改变col-lg-5的位置，你可以像这样做

.row {
display: flex;
}

@media screen only and (max-width: 767px) {
.col-lg-7 {
order: 1; 
}
.col-lg-5 {
order: 2;
}
}