Sorting divs in grid format using only CSS - css

Question

I have a problem in sorting the div(s), i have two types a, b
a - should always be at the front (all a types)
b - should be following all a types.
HTML:
<div class="" style="">
<div class="a">a</div>
<div class="a">a</div>
<div class="b">b</div>
<div class="a">a</div>
</div>
CSS:
.a, .b {
display:inline-block;
width:50px;
height:50px;
padding:15px;
margin:5px;
}
.a {
float:left;
background-color: blue;
}
.b { background-color: red; }
This seems to work fine in a line:
But breaks as a grid:
Desired result (number of boxes is irrelevant):
JsFiddle: http://jsfiddle.net/kQkn9/
How would i go about fixing this problem?

Answer 1

If you're looking for a pure CSS solution, your only option is to use Flexbox.
http://jsfiddle.net/kQkn9/2/
.container { /* parent element */
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#supports (flex-wrap: wrap) {
.container {
display: flex;
}
}
.a, .b {
display: inline-block;
width: 50px;
height: 50px;
padding: 15px;
margin: 5px;
}
.a {
background-color: blue;
}
.b {
-webkit-flex-order: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
background-color: red;
}
Browser support: Chrome, Opera, IE10. http://caniuse.com/#feat=flexbox

Answer 2

don't believe this is possible with CSS and HTML alone. My recommendation would be to sort the a's and b's, without changing your css as you have it then re-insert them into the DOM in their new, sorted order.
something to this effect: (in JQ)
var listOfAs = $('.a').clone();
var listOfBs = $('.b').clone();
var parent = $('.a').first().parent('div');
$('.a, .b').remove();
parent.append(listOfAs);
parent.append(listOfBs);
I know this is a touch cumbersome and not super 'responsive' but as i said, don't think its possible with CSS alone...this is just a quick-and-dirty implementation to get you started.
PS: updated your fiddle http://jsfiddle.net/kQkn9/6/
EDIT: clearly this IS possible in newer browsers (thanks to #cimmanon). If you need to support older browsers, you'll have to do something like this (which is definitely less cool)