Menu
Given that the HTML
<div> <div id="content1"> content 1</div> <div id="content2"> content 2</div> <div id="content3"> content 3</div> </div> render as
content 1 content 2 content 3 My question:
Is there a way to render it as below by using CSS only without changing the HTML part.
content 1 content 3 content 2 
779
The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order.
If position: absolute; or position: fixed; - the right property sets the right edge of an element to a unit to the right of the right edge of its nearest positioned ancestor.
if you set width:500px; and height:300px; (or whatever size you want) the div should stay the same size. Also, you can set overflow:hidden; so that if whatever is in the div goes beyond those bounds, it is not shown, and does not resize the div. Show activity on this post. Try this one.
This can be done in browsers that support the CSS3 flexbox concept, particularly the property flexbox-order.
See here
However, support for this is only in current versions of most browsers still.
Edit Time moves on and the flexbox support improves..
131
This works for me: http://tanalin.com/en/articles/css-block-order/
Example from this page:
HTML
<div id="example"> <div id="block-1">First</div> <div id="block-2">Second</div> <div id="block-3">Third</div> </div> CSS
#example {display: table; width: 100%; } #block-1 {display: table-footer-group; } /* Will be displayed at the bottom of the pseudo-table */ #block-2 {display: table-row-group; } /* Will be displayed in the middle */ #block-3 {display: table-header-group; } /* Will be displayed at the top */ As stated there, this should work in most browsers. Check link for more info.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
