Jak zmienić kolejność kolumn w szablonie CSS, aby najpierw umieścić ważną treść? - css, szablony, css-float

Mam 3-kolumnowy szablon CSS z kolumnamitertiaryContent (po prawej), primaryContent (środek) i secondaryContent (po lewej). Kiedy używam Lynxa do "zobaczenia, co widzą roboty", prawa kolumna pojawia się najpierw, ponieważ jest pierwsza w kolejności w index.php i CSS, całkowicie rujnując moje SEO. Nawet w przypadku SERP, tekst z prawej kolumny jest pokazany pod linkiem.

Oto co dostałem w index.php:

    <div id="outer">
<div id="header">
</div>
<div id="content">
<div id="tertiaryContent">
</div>
<div id="primaryContentContainer">
<div id="primaryContent">
</div>
</div>
<div id="secondaryContent">
</div>
<div class="clear">
</div>
</div>

I to właśnie dostałem w pliku default.css:

    #outer {padding: 0em; margin: 0em; width: 100%;}
#header {position: relative; height: 10px;}
#primaryContentContainer {float: right; margin: 0em -15em 0em -19em; width: 100%;}
#primaryContent {margin: 0em 15em 0em 15em; padding: 0em 0em 1.5em 4.25em;}
#secondaryContent {position: relative; float: left; width: 15em; padding: 0 0em 1.5em 1em;}
#secondaryContent .xbg {position: absolute; right: 0em; bottom: -64px; height: 64px; width: 128px;}
#tertiaryContent {position: relative; float: right; width: 16em; margin: 0em 0em 0em 0em; padding: 0em 1em 0em 0em;}
#tertiaryContent .xbg {position: absolute; left: 0em; bottom: -64px; height: 64px; width: 128px;}

Moje pytanie brzmi: w jaki sposób mogę zmienić ten kod, aby zachować ten sam układ, ale aby pokazać najpierw element primaryContent, aby był numerem 1 podczas czytania wersji tekstowej witryny?

Odpowiedzi:

Dzięki absolutnemu pozycjonowaniu możesz łatwo przesuwać bloki bez względu na to, w jaki sposób pojawiają się w znacznikach.

Simplfied Demo

HTML:

<div class="wrap">
<div class="primary content">one</div>
<div class="secondary content">two</div>
<div class="tertiary content">three</div>
</div>

CSS:

.wrap{width:600px; position:relative; margin:0 auto;}
.content{width:200px; height: 500px; position: absolute; top:0;}
.primary {background: salmon; left:200px;}
.secondary{background: lightblue; left: 400px; }
.tertiary{background: goldenrod;}