I have the following code :

```
<div class="container">
    <div class="item">1</div>
    <div class="item can_disappear">2</div>
    <div class="wide"></div>
    <div class="item need_to_be_up">3</div>
    <div class="item">4</div>
</div>

```

the css : 

```
.item { 
    width :49%;
    height : 100px;
    float : left;
    background-color:yellow;
    border:1px solid black;
}

.container {
    width :200px;
    position : relative
}

.wide {
    width :100%;
    height : 100px;
    background-color:red;
    float:left;
}

```

[![enter image description here](https://i.stack.imgur.com/Er4DC.png)](https://i.stack.imgur.com/Er4DC.png)

Item #2 can get "display:none".
is there any way that item #3 will go up (will be before the wide div, side to side with the first item) ?

It is not a must that the "wide" div be floated...

here is the jsfiddel : <https://jsfiddle.net/edanuf7t/4/>
Thanks