Boostrap 4网格重新排序 [英] Boostrap 4 grid re-order

问题描述

我使用Bootstrap 4拥有以下HTML代码:

I have the following HTML code using Bootstrap 4:

<div class="row">
  <div class="col-12 col-sm-4">
    First, but unordered
  </div>
  <div class="col-12 col-sm-4">
    Second, but unordered
  </div>
  <div class="col-12 col-sm-4 order-sm-1">
    Third, but first
  </div>
</div>

我希望将第三个div放置在sm屏幕上的第一位置，但事实并非如此.这是 JSFiddle 我错过了什么?谢谢！

I am expecting the third div to be placed in first position on sm screens but it is not. Here is a JSFiddle What have I missed? Thanks!

推荐答案

order类并没有真正处理元素的顺序，而是像交换系统一样.因此，您也需要在其他div中声明订单

The order class is not really handeling the order of the elements it's instead like a swap system. So you need to declare an order in other divs too

<div class="row">
  <div class="col-12 col-sm-4 order-sm-12">
    First, but unordered
  </div>
  <div class="col-12 col-sm-4 order-sm-12">
    Second, but unordered
  </div>
  <div class="col-12 col-sm-4 order-sm-1">
    Third, but first
  </div>
</div>

这是一个小提琴

这篇关于Boostrap 4网格重新排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！