Bootstrap移动端列排序问题求助：实现date-text-image显示顺序

嘿，我来帮你搞定这个移动端内容排序的问题！你的需求是在移动端让所有区块都按照date → text → image的顺序显示，但目前第二个row在移动端会显示成image → text → data，打乱了顺序。我们可以利用Bootstrap的列排序类来实现这个需求，下面是具体方案：

核心思路 #

Bootstrap是移动优先的框架，所以我们先定义移动端的显示顺序，再通过断点类（比如order-md-*）调整桌面端的布局。这里用Bootstrap 4+的order-*系列类就可以轻松实现：

• order-1/order-2/order-3：控制移动端（xs断点，即屏幕<768px）的显示顺序，数字越小越靠前
• order-md-1/order-md-2/order-md-3：控制中等屏幕及以上（md断点，≥768px）的显示顺序

修改后的完整代码 #

<!-- 第一个row：移动端已经是date→text→image，无需调整排序，保持原有结构即可 -->
<div class="row" id="sobre-dr">
  <div class="col-xs-12 col-md-3"> data </div>
  <div class="col-xs-12 col-md-6"> text </div>
  <div class="col-xs-12 col-md-3"> image </div>
</div>

<!-- 第二个row：添加order类调整移动端顺序 -->
<div class="row" id="sobre-dr">
  <!-- 移动端排第3位，桌面端排第1位 -->
  <div class="col-xs-12 col-md-3 order-3 order-md-1"> image </div>
  <!-- 移动端和桌面端都排第2位 -->
  <div class="col-xs-12 col-md-6 order-2"> text </div>
  <!-- 移动端排第1位，桌面端排第3位 -->
  <div class="col-xs-12 col-md-3 order-1 order-md-3"> data </div>
</div>

额外说明 #

如果你还在使用Bootstrap 3，那需要用pull-*和push-*类来实现（不过更推荐升级到Bootstrap 4+哦），代码示例如下：

<div class="row" id="sobre-dr">
  <div class="col-xs-12 col-md-3 col-md-push-9"> data </div>
  <div class="col-xs-12 col-md-6"> text </div>
  <div class="col-xs-12 col-md-3 col-md-pull-9"> image </div>
</div>

这样调整后，不管是第一个还是第二个区块，在移动端都会严格按照date → text → image的顺序展示，桌面端则保持你原来的3-6-3布局啦～

内容的提问来源于stack exchange，提问作者José Matheus