bootstrap div变大变小,Bootstrap 3只改变小屏幕上的div顺序

doing my 1st responsive design and is something like this possible in bootstrap 3. Change this

To

Change the order essentially from a 3 column layout on large screens to moving the logo to left and stack the other two columns on smaller screens only. I would like to do it using the bootstrap classes (col-xs-6 col-md-4 etc) if possible and not have to duplicate content in a show/hide sort of fashion. I liked the grid layout bootstrap3 provides for large screens so would prefer to keep it if could sort out the layout on smaller screens. Any recommended useful links or help on best approach for this appreciated.

Thanks for ideas,

J

ps can you also advise on basic media queries (min-width, max-width etc in pixels) to start with.

解决方案

Yes, this can be done without JS using BS3 nesting and pushing/pulling and all the floats clear:

LOGO

B

A