CODEWITHSUNDEEP
htmltwitter-bootstrap
Harry Muscle
Harry Muscle

Reputation: 2387

Change div ordering with Bootstrap

I'm trying to figure out how to create the following layout with Bootstrap 3. On a small sized screen (and above) I would need the following (where the X and Y divs are 6 columns and the Z div is 12 columns):

XXXXXX YYYYYY

ZZZZZZZZZZZZZ

And on an extra small screen I would need the following (where each div is 12 columns):

XXXXXX

ZZZZZZ

YYYYYY

The problem I'm running into is figuring out how to get the Y div to switch order with the Z div on extra small screens.

Upvotes: 0

Views: 83

Answers (3)

Christopher Batts
Christopher Batts

Reputation: 123

Although it might not be entirely as you want, have you tried duplicating the element depending on screen size then enabling each version of the element for the respective screen sizes? http://getbootstrap.com/2.3.2/scaffolding.html#responsive - and scroll down to Responsive utility classes

Upvotes: 0

scooterlord
scooterlord

Reputation: 15359

What you are looking for is not possible - sorry. Full-width elements' position cannot be changed. If zzz and yyy were halves maybe it would have been possible.

What I would do -but also depends on content- is to duplicate an element and use the visibility classes to hide/show the one in the position needed.

...else use jquery and the append function.

Upvotes: 1

Andrew Johnston
Andrew Johnston

Reputation: 1129

I don't think that you will be able to get this behaviour only with css. I would recommend using the window.onresize event to trigger a resize function and using jQuery to attach html to different elements. Try making the output column smaller in this jsBin:

JSBIN

Upvotes: 0

Related Questions