CSS clear not working with Media Query

Question

iv get 4 div at width 25%, div 1 text div 2 image, diz 3 text div 4 image @ media 480 i would like to have to row, but div 3 get stuck and i have 3 rows :( think you get what i mean lol. Iv put a clear both on the 2 div and yes it works but on media 768 it should be on 1 row but know it still on 2 rows but on hath the screen so i put clear none and then it will not work again

<div id="box1" class="column1 four">
        <h3>BOX 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p>
    </div>
    <div id="box2" class="column1 four">
        <h3>BOX 2</h3>
        <img src="img/box2.jpg">

    </div><div class="clear"></div>
    <div id="box3" class="column1 four">
        <h3>BOX 3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.</p>
    </div>
    <div id="box4" class="column1 four">
        <h3>BOX 4</h3>
        <img src="img/box4.png">

</div>

CSS

@media only screen and (min-width: 480px) {
 .clear {clear: both}

}

@media only screen and (min-width: 768px) {

} .clear {clear: none;}

Answer 1

Learn how to write and use CSS media queries

@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}

So in your case it shall be

@media only screen and (min-width: 480px){
 .clear {clear: both}
}

@media only screen and (min-width: 768px) {
 .clear {clear: none;}
}