Question

Probably a really simple question but I’m getting fed up of tinkering around trying to implement this myself. The problem is i’m working with pre-generated html code that comes from our software offering and cannot therefore just move one div above the other in html. I therefore have to do it in css.

  <div class="job_description">
    <h1>Web Developer (.Net/Mobile)</h1>
    <div class="job_summary">
       <p>
     Some text here
    <br>
    <br>
     Some text here
       </p>
    </div>

    <div class="job_classifications">
        <div class="classification x_location">
           <div class="class_type">Location</div>
           <div id="location" class="class_value"> London</div>
        </div>

         <div class="classification refno">
           <div class="class_type">Ref No</div>
           <div class="class_value">80</div>
        </div>
  </div>

Bascally I would like job_classifications to appear above job_summary. Then within job_classifications I need each of the different classifications to be displayed together in a grid format.

Any ideas?

Answer 1

Something like this will probably do the trick, though it may need to be tailored a bit depending on how exactly the content looks. Using jQuery:

$(".job_classifications").prependTo(".job_summary");

Here’s an example http://jsbin.com/aqukez/1/edit