css - Have side column appear in the middle on small screens -

i'm trying create layout using twitter bootstrap's grid 3 blocks a, b , c appear in order when stacked on small screens. on larger screens however, middle block b should move right , , c appear stacked left.

the catch is, blocks have unknown heights , in fact, heights can change dynamically due collapsibles, tabs, etc. in particular, trouble when b higher a.

the small screen layout supposed this: (in picture b high block indicated using 2 brackets.).

[a] [b] [b] [c] 

on wider screens want render this:

[a][b] [c][b] 

the straight forward code this:

<div class="row">   <div class="col-md-6">a</div>   <div class="col-md-6">b</div>   <div class="col-md-6">c</div> </div> 

but layout contains ugly gap between , c because c placed below end of b.

[a][b]    [b] [c] 

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

will solution, in addition can define order style every div example on smaller screen if want b displayed first

@media screen , (max-width: 768px) { div.b {      order: 1 } dic.a {      order: 2 } div.c {     order: 3 } } 

and b first second , c third

for more information flexbox visit - https://css-tricks.com/snippets/css/a-guide-to-flexbox/