Changing the order of images in html

Changing the order of images in html

Yo!

Would you be able to tell me the best way to get the following images to change the order in which they are positioned in html?

  
  1. <div class="main">
  2. <a class="product" href="#"><img class="hider" alt="" title="" src="img2.jpg"></a>
  3. <a class="product" href="#"><img class="hider" alt="" title="" src="img3.jpg"></a>
  4. <a class="product" href="#"><img class="displayer" alt="" title="" src="img1.jpg"></a>
  5. </div>
I want to get img1.jpg with the class displayer to be before the images with class hider so that they appear in the correct order. any idea how I can do that with CSS? I've seen something about using display:block etc but I couldn't get it working. Or is this kind of thing better to do with JQuery?

Thank you