Bootstrap - 更改行和列顺序

Question

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

Answer 1

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.

Answer 2

There are 2 solutions without using Javascript

First Option:

The element list is using Responsive Utilities Classes

http://getbootstrap.com/css/#responsive-utilities

Check this example: http://jsfiddle.net/ppollono/mehfb6p0/12/

For the list in the first row

class="visible-xs"

For the list at the bottom

class="hidden-xs"

CONTS: element list is duplicated

Second Option:

Use Flex display

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

Check this example: http://codepen.io/Palapas/pen/LVvbyW?editors=110

 .row { margin: 0px; padding: 0px; background: #999; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: space-between; justify-content: space-between; } .row div { padding: 5px; margin: 5px; border: 1px solid #000; border-radius: 3px; width: 100%; } .elA { background-color: #E99048; } .elB { background-color: #B0C07E; } .elC { background-color: #B0B9DC; } @media (min-width: 768px) { .row .et { -webkit-order: 1; order: 1; width: 30%; } .row .eg { -webkit-order: 2; order: 2; width: 30%; } .row .el { -webkit-order: 3; order: 3; } }

 <div class="row"> <div class="et elA">Title A: Integer et fermentum leo. In sollicitudin arcu eget nisi pretium.</div> <div class="eg elA">Graph A: Integer et fermentum leo. In sollicitudin arcu eget nisi pretium, viverra rutrum neque malesuada. Cras maximus nibh quis ex varius feugiat. Ut nec arcu nunc. </div> <div class="el elA">List A <br> <ul> <li>Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.</li> <li>Nulla sed leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</li> <li>Fusce lacinia arcu et nulla. Nulla vitae mauris non felis mollis faucibus.</li> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</li> <li>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</li> <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li> <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li> <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li> <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li> </ul> </div> <div class="et elB">Title B: Integer et fermentum leo. </div> <div class="eg elB">Graph B</div> <div class="el elB">List B <br> <ul> <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li> <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li> <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li> <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li> <li>Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.</li> <li>Nulla sed leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</li> <li>Fusce lacinia arcu et nulla. Nulla vitae mauris non felis mollis faucibus.</li> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</li> <li>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</li> <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li> <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li> <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li> <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li> <li>Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.</li> <li>Nulla sed leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</li> <li>Fusce lacinia arcu et nulla. Nulla vitae mauris non felis mollis faucibus.</li> </ul> </div> <div class="et elC">Title C: Integer et fermentum leo. In sollicitudin arcu eget nisi pretium, viverra rutrum neque malesuada. Cras maximus nibh quis ex varius feugiat.</div> <div class="eg elC">Graph C</div> <div class="el elC">List C <br> <ul> <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li> <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li> <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, </ul> </div> </div>

CONTS: not supported by IE9 and below http://caniuse.com/#feat=flexbox

Answer 3

Probably bit late to the party, but you can easily fix this with some lines of css and flexbox. I don't know if bootstrap provides something similar.

.row {
    display: flex;
    flex-flow: row wrap;
}

.row > div {
    width: 100%;
}

.elA {
    order: 1;
}

.elB { 
    order: 2;
}

.elC {
    order: 3;
}

Example: https://jsfiddle.net/t284d3mg/

Flexbox is perfectly explained at MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

Be aware that older browser don't support flexbox, have an old specification implemented or that you need to add prefixes.

Answer 4

Is this what you are looking for? https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

I use media queries all the time for that sort of things.

I can use it in two ways. first, define stylesheet:

<link rel="stylesheet" media="screen and (max-device-width: 799px)" />

Second, define media query in stylesheet:

@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }

Hope i didn't misunderstood your question :D