如何在响应式布局中调整Div顺序：col-sm-12时two置于one上方

没问题！在Bootstrap 4中，我们可以利用它内置的Flexbox排序类轻松实现这个需求，核心就是通过order-*系列类来控制不同屏幕尺寸下元素的显示顺序。

具体实现步骤 #

• 默认情况下（lg/md断点，屏幕宽度≥768px），保持HTML里.one在前、.two在后的顺序，让它们并排显示。
• 当屏幕缩小到sm及以下（宽度≤768px），通过给元素设置断点专属的order类，调整显示顺序：给.one添加order-sm-2，给.two添加order-sm-1。因为Flexbox布局中，order值越小，元素排列越靠前。

修改后的完整代码 #

CSS部分

.one {
  height: 200px;
  border: 5px solid red;
}
.two {
  height: 200px;
  border: 5px solid blue
}
p {
  text-align: center;
  vertical-align: center;
  margin: auto;
  font-size: 3em;
  font-weight: bold;
}

HTML部分

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="one col-lg-6 col-md-6 col-sm-12 order-sm-2">
      <p>1</p>
    </div>
    <div class="two col-lg-6 col-md-6 col-sm-12 order-sm-1">
      <p>2</p>
    </div>
  </div>
</div>

原理说明 #

Bootstrap 4的栅格系统基于Flexbox，order-sm-*类会在sm断点及以下生效：

• order-sm-1让.two在小屏幕下成为排序第1位的元素，自然排在前面
• order-sm-2让.one成为排序第2位的元素，排在.two之后

这样就完美实现了大屏幕下1左2右，小屏幕下2上1下的布局效果。

内容的提问来源于stack exchange，提问作者Timilehin Osaze Adegbulugbe