引导 - 更改行和列顺序 [英] Bootstrap - Change rows and columns order

问题描述

使用Bootstrap可以根据视口拥有这两种不同的布局吗？我一直在寻找这方面的信息，并且我了解。我希望，如果您正在处理它，您将能够在引导程序3中管理列顺序。

Using Bootstrap is it possible to have these two different layouts depending on the viewport? I've been searching about this and I'm aware of the concepts push, pull and responsive utilities but the examples I've found had simpler structures.

On this case, I rather not use responsive utilities (because there would be lots of repeated processing) and/or JavaScript, just HTML and CSS manipulation.

Here's a fiddle with the wrong layout on smartphones...

<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>

Tablets and desktops layout

Smartphones layout

解决方案

I found this question today and saw no such answer that would satisfy the OP and the future visitors of this post. Thus, decided to answer it with current bootstrap 4 version:

<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>

Here's the demo for bootstrap 4 row and column ordering. I hope, you'll be able to manage column ordering in bootstrap 3 as well if you are working on it.

这篇关于引导 - 更改行和列顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！