Can I bring a few elements out of the column flow?

Question

In hope I wrote the question in the title right I'll continue and since I'm not that good with words I'll try to keep it as simple as I can.

So what I'm trying to accomplish is list of items with unique id's set to show in columns. If specific id has it's own style (float and make a block with background) I need to get it out if the column flow/render (is that the proper term?). Is that possible and how (trying to avoid JS/jQuery)? This code:

div {
  height: 200px;
}
ul {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}
#unique1,
#unique2 {
  float: left;
  display: block;
  width: 20%;
  height: 200px;
  border: 1px solid black;
}

<div>
  <ul>
    <li id="unique1">text</li>
    <li id="unique2">text</li>
    <li id="unique3">text</li>
    <li id="unique4">text</li>
    <li id="unique5">text</li>
    <li id="unique6">text</li>
    <li id="unique7">text</li>
    <li id="unique8">text</li>
    <li id="unique9">text</li>
    <li id="unique10">text</li>
  </ul>
</div>

Next piece of code to show what I want to achieve.

div {
  height: 200px;
}
ul {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}
#unique1,
#unique2 {
  float: left;
  display: block;
  width: 20%;
  height: 200px;
  border: 1px solid black;
}

<div>
  <div id="unique1">text</div>
  <div id="unique2">text</div>
  <ul>
    <li id="unique3">text</li>
    <li id="unique4">text</li>
    <li id="unique5">text</li>
    <li id="unique6">text</li>
    <li id="unique7">text</li>
    <li id="unique8">text</li>
    <li id="unique9">text</li>
    <li id="unique10">text</li>
  </ul>
</div>

Answer 1

You cannot do it with CSS alone. You'll have to use Javascript or jQuery:

$('ul > li').each(function() {
    if ($(this).css('float') == 'left') {
        $(this).parent().before(this);
    }
});