Bootstrap - 更改行和列顺序

Question

使用Bootstrap可以根据视口设置这两种不同的布局吗？我一直在寻找这个,我知道推送,拉动和响应实用程序的概念,但我发现的例子有更简单的结构.

在这种情况下,我宁愿不使用响应实用程序(因为会有很多重复处理)和/或JavaScript,只需要HTML和CSS操作.

这是智能手机上错误布局的小提琴 ......

<div class="row">
  <div class="col-sm-4 elA">Title A</div>
  <div class="col-sm-4 elB">Title B</div>
  <div class="col-sm-4 elC">Title C</div>

  <div class="col-sm-4 elA">Graph A</div>
  <div class="col-sm-4 elB">Graph B</div>
  <div class="col-sm-4 elC">Graph C</div>

  <div class="col-sm-12 elA">List A</div>
  <div class="col-sm-12 elB">List B</div>
  <div class="col-sm-12 elC">List C</div>
</div>

平板电脑和桌面布局

智能手机布局

Answer 1

我今天发现了这个问题,并没有看到这样的答案,以满足OP和这篇文章的未来访客.因此,决定用当前的bootstrap 4版本来回答它:

<div class="row">
  <div class="col-12 col-md-4 order-1">
    <div class="m-3 bg-warning">Title A</div>
  </div>
  <div class="col-12 col-md-4 order-4 order-md-2">
    <div class="m-3 bg-success">Title B</div>
  </div>
  <div class="col-12 col-md-4 order-7 order-md-3">
    <div class="m-3 bg-info">Title C</div>
  </div>
  <div class="col-12 col-md-4 order-2 order-md-4">
    <div class="m-3 bg-warning">Graph A</div>
  </div>
  <div class="col-12 col-md-4 order-5 order-md-5">
    <div class="m-3 bg-success">Graph B</div>
  </div>
  <div class="col-12 col-md-4 order-8 order-md-6">
    <div class="m-3 bg-info">Graph C</div>
  </div>
  <div class="col-12 order-3 order-md-7">
    <div class="m-3 bg-warning">List A</div>
  </div>
  <div class="col-12 order-6 order-md-8">
    <div class="m-3 bg-success">List B</div>
  </div>
  <div class="col-12 order-9">
    <div class="m-3 bg-info">List C</div>
  </div>
</div>

这是bootstrap 4行和列排序的演示.我希望,如果您正在处理它,您将能够在bootstrap 3中管理列排序.