make css for mobile, which is better?

Below is what I want it to look like. But for seo I want to load the main center first then the others divs

so want the html like

<div id='wrapper'>
<div id='MainCenter'>
</div>
<div id='header'>
</div>
<div id='LeftNav'>
</div>
<div id='MainTop'>
</div>
<div id='Right Bar'>
</div>
<div id='footer'>
</div>
</div>

but look like

>I want to load the main center first
While you can do this via css, If you don't have great compelling content, it is not going to make much difference if your main center content loads before your left nav content.

Just have well formed html, good content that is not copy/pasted from someplace else, update your content on a regular basis and on page seo will take care of it'self.

We are in a very competitive market and are on page 4 on google, just want to try and do everything we can we have over 8000 pages that will use this template and as we have over 100 links in the left nav.
I have read that you can get better results by puting the main div first. At the moment its done with divs but by using the table layout div tags so can not move them.
How would i do it so i can move the maincenter into the correct place if i put it first in the html?

greetings  taz8020, , The answer for having Two-Sites with a separate Mobil or One-Site with a CSS-JS alterations, will depend on WHAT and especially "How Much" you display on  several many of your site pages (as some site pages will have much different content than others) and on how much work you want to do in the conversion. Having done this I can say that there is no general answer, for me the first thing I do, , is make an experimental "development" page and actually load this empty page into a Mobil (smart phone) device. Then I try to copy and paste from the desktop version code, the absolute minimum necessary content (no ads, no menus, no side bars, no images, , , to start with) and then have a for-real view of the page on a vertical phone, Then make adjustments for some width or height, or relative placement , until is has a minimum (or perfect) acceptable view on phone that your Mobil users will be Glad to use (understandable and touch friendly, remember in touch you can NOT use the old CSS :hover for slide out menus and other) . . . Then you can add the other elements one at a time changing their position and size, until you have a half way decent (or perfect) looking phone view.
Then review the differences in the Page code for the new Mobil and the old desktop, and see if you can do the changes in CSS-JS alterations OR if there's just to much difference and you will have to have a separate mobil site.
Please, for your Mobil conversion do not consider anything  like "SEO optimization" until you have a customer-user "touch phone attractive-friendly" pages, then worry about other stuff.
The way you have your <DIV> arranged now will be somewhat of a challenge to get a use useful phone view with just CSS, For me I abandon any attempt to have two column page view on narrow vertical phone views, I go to single column with touch "slide outs" for extra content, but there is no "one size fits all" thing for a Mobil page layout.
It is my view that having a separate Mobil development site, gives you so much more possibility for getting the smaller Touch pages user friendly.

What you read was probably from 2001. Search engines (especially Google) no longer base relevance on nearness to the top of code.

Today you probably want to look into semantic markup.

look into html5 tags that indicate what each part of the page is about:

http://www.w3schools.com/html/html5_semantic_elements.asp

Don't forget the basic semantic tags like h1, strong, em, li.

Then you can look into deeper semantics like from schema.org.

No miracles or silver bullets. But this is the future, not the past.

@Tiggerito  +1  
>What you read was probably from 2001. Search engines (especially Google) no longer base relevance on nearness to the top of code.
You said this better then I did.

This would have been your 2001 convoluted  answer http://jsbin.com/ezunam/1/

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style type="text/css">
#container {
	border: thin solid #900;
	position: absolute;
	top: 101px;
	width: 900px;
	overflow: scroll;
	height: 300px;
	background-color: #900;
}
#header {
	position: absolute;
	width: 900px;
	top: 0px;
	height: 100px;
	border: thin solid #036;
	background-color: #93B1FF;
}
#footer {
	height: 100px;
	width: 900px;
	top: 402px;
	border: thin solid #090;
	position: absolute;
	background-color: #B5D46A;
}
#left {
	border: thin solid #09C;
	position: absolute;
	height: 300px;
	width: 100px;
	left: 5px;
	top: 0px;
	background-color: #94FEFF;
}
#main {
	height: 300px;
	width: 670px;
	position: absolute;
	left: 115px;
	border: thin solid #C69;
	background-color: #FFAEB3;
}
#right {
	position: absolute;
	height: 300px;
	width: 100px;
	top: 0px;
	right: 5px;
	border: thin solid #F90;
	background-color: #F0B989;
}
</style>
</head>
<body>
  <div id="container">
  <div id="main">Main</div>
  <div id="left">left</div>
  <div id="right">right</div>

  </div>
<div id="header">head</div>
<div id="footer">footer</div> 
</body>
</html>

Select allOpen in new window

@padas, great example.

With the OP about mobile and the fact mobile is getting more important I think it's better to focus on making the page work good on many screen sizes and less on code order.

I probably exaggerated with 2001. This world moves so fast that knowledge from last month can be miss information on how things now work. And what people think is how it now works is also mostly miss information. And then Googlers join in to confuse the hell out of us!