html - 3 column responsive layout becomes 2 column layout with center column moving to bottom in mobile resolution -

i need know if possible have center fixed sized column appear below left(fixed pixel width) , right(fluid) columns when page shrunk mobile view, becoming fluid full width of parent container div.

bootstrap library available, left column in case fixed exact pixel width.

example here:

i think looking for: http://codepen.io/anon/pen/xgzpkz

using calc css3 function inside width property helps things have use javascript for.

in link sent you, put columns inside wrapper. these columns floated left, except orange one, floating right. making allow left floating item fill remaining space between blue , orange columns.

i set orange div width be:

width: calc(100% - (200px * 2)) 

200px being width of 1 fixed-width column.

then, on mobile, tell red column go belongs setting width 100% , tell orange 1 has 1 column left on side.

@media screen , (max-width: 640px) {   .wrapper{     .column{       float: left;       &:nth-child(2){         width: calc(100% - 200px);       }       &:last-child{         width: calc(100%);       }     }   } }