Bootstrap - Change rows and columns order

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 r

Answer 1

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

  
Title A: Integer et fermentum leo. In sollicitudin arcu eget nisi pretium.
  
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.
  
  
List A
    

    

      
Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.
      
Nulla sed leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
      
Fusce lacinia arcu et nulla. Nulla vitae mauris non felis mollis faucibus.
      
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.
      
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
      
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
      
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.
      
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.
      
Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
    
  
  
Title B: Integer et fermentum leo.
  
  
Graph B
  
List B
    

    

      
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
      
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.
      
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.
      
Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
      
Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.
      
Nulla sed leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
      
Fusce lacinia arcu et nulla. Nulla vitae mauris non felis mollis faucibus.
      
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.
      
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
      
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
      
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.
      
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.
      
Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
      
Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.
      
Nulla sed leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
      
Fusce lacinia arcu et nulla. Nulla vitae mauris non felis mollis faucibus.
    
  
  
Title C: Integer et fermentum leo. In sollicitudin arcu eget nisi pretium, viverra rutrum neque malesuada. Cras maximus nibh quis ex varius feugiat.
  
Graph C
  
List C
    

    

      
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
      
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.
      
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,
    
  

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