CSS Reverse inline flow - html

Question

So, I have a line of inline elements that adjusts based on the width of the window, like so for example:
[a][b][c][d][e] -- 1000px
[a][b][c]
[d][e] -- 600px
This makes sense, and is what is expected of inline elements. However, I want to know if it's possible to make it do this:
[d][e]
[a][b][c]
or even
[a][b]
[c][d][e]
The reason I want this is because I have content below the row of inline elements, and when it breaks into two rows, having the top row be wider than the bottom row looks really bad.
Thanks.
Here's a fiddle:
http://jsfiddle.net/6Hm4C/1/
Notes:
Window width, element width and number of elements are all dynamic.
It has to work in IE9+ and FF24+, if this isn't possible FF has priority.

Answer 1

How about using a "breaker" container like this?
<div id="container">
<div class="breaker">
<div class="box">Box 1 Bigger</div>
<div class="box">Box 2</div>
</div>
<div class="breaker">
<div class="box">Box 3 Random</div>
<div class="box">Box 4</div>
<div class="box">Box 5 Stuff</div>
</div>
</div>
And this CSS:
.breaker { display: inline-block; }
.box {
display: inline-block;
vertical-align: top;
}
This will break [a][b][c][d][e] into
[a][b]
[c][d][e]
Now, in order to account for a dynamic number of boxes and widths, you need to use Javascript. With jQuery, you could do it like this:
function betterBreak(container) {
var boxes = $(container).children(),
sum = 0, max = 0;
boxes.map(function(x, box) { max += $(box).outerWidth(); });
boxes.each(function(x, box) {
sum += $(box).outerWidth();
if(sum > max/2) {
var breakerBig = $('<div class="breaker"></div>'),
breakerSmall = $('<div class="breaker"></div>');
boxes.slice(x).appendTo(breakerBig);
boxes.slice(0,x).appendTo(breakerSmall);
$(container).append(breakerSmall).append(breakerBig);
return false;
}
});
}
Calling betterBreak('#container') on a Container element that has an unknown number of child element "boxes" will dynamically wrap the children in 2 breaker divs that split the line into the desired layout when going to 2 rows.
Adjusted Demo: http://jsfiddle.net/pyU67/8/

Answer 2

You could use writing-mode as i commented , but for younger browser, Firefox seems out :http://codepen.io/gc-nomade/pen/DCqLb/
body {
counter-reset: boxe;/* demo purpose */
/* reverse flow from bottom to top */
writing-mode:lr-bt;
-webkit-writing-mode: horizontal-bt;
-moz-writing-mode: horizontal-bt;/* fails */
-o-writing-mode: horizontal-bt;
writing-mode: horizontal-bt;
}
/* demo purpsose */
b {
display:inline-block;
line-height:3em;
width:8em;
text-align:center;
background:lime;
border-radius:1em;
margin:1em;
}
b:before {
counter-increment:boxe;
content:counter(boxe) ' ';
}
HTML use in body
<b> inline-box </b>
<b> inline-box </b> <!-- and so many more -->
From your fiddle , it does : http://jsfiddle.net/6Hm4C/3/ or just the spans http://jsfiddle.net/6Hm4C/4/
To test in IE, Safari, Opera, Chrome, and fails in FF :(

Answer 3

You could try to add a divider like so:
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="divider"></div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
and use media screen:
.divider { display: none; }
#media screen and (max-width: 600px) {
.divider {
clear: both;
display: block;
}
}
Example

Answer 4

I'm open to either CSS or jquery. – #Surgery
Answer using Javascript / jQuery
I have created a fiddle which creates a mirror HTML of what happens when the elements are shifted downwards.
Here is an image example:
Demo fiddle
HTML
<div id="first">
<div class="inp">aaaa</div>
<div class="inp">b</div>
.
.
</div>
<!-- Below part to generate mirror code of the above -->
<div id="wrap">
<div id="second">
</div>
</div>
Javascript / jQuery
var actual = $('#first');
var mirror = $('#second');
$('#wrap').css({'top':''+actual.offset().top+'px'});
$(window).resize(function(){
var frag = document.createDocumentFragment();
var ele='div';
var wrp = actual.height()+actual.offset().top;
$('#first .inp').each(function(){
var creEle = document.createElement(ele);
creEle.className="inp";
creEle.innerHTML = $(this).html();
creEle.style.position = "absolute";
var diff = wrp - ($(this).height()+$(this).offset().top);
creEle.style.top = diff+"px";
creEle.style.left = $(this).offset().left-actual.offset().left+"px";
frag.appendChild(creEle);
});
mirror.html(frag);
});
$(window).trigger('resize');
CSS
html,body,#first,#second{
width:100%;
height:auto;
}
#first{
visibility:hidden;
}
#wrap{
position:absolute;
}
#second{
position:relative;
}
.inp{
display:inline-block;
border:1px solid black;
margin-right:3px;
}

Answer 5

Use flex container with flex-wrap: wrap-reverse:
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-end; // or flex-start
}