css - Shift div upward to fill empty space in Bootstrap 3 layout -

i have bootstrap layout reorders way want when goes 1-column @ smallest media query size of xs:

[a] [b] [img] [c] [d] [e] 

at higher screen sizes, want this:

[a][img] [b][e] [c] [d] 

instead, looks this:

[a] [b][img] [c] [d][e] 

here's demo.

how can make image , div on right "float" upward fill empty space?

then should put columns in order.

like this:

[a], [img], [b], [e], [c], [d]

your current order is:

[a], [b], [img], [c], [d], [e]

see updated codepen.

i aware mobile layout in different order, cannot rearrange dom elements css