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

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.