Some questions about floating elements

I have two elements, #sidebar and #left-area. When I float:left them, #left-area appears first, how would I make #sidebar appear first instead of #left-area?

You can use the CSS order property for this as long as you wrap them both in a container with display:flex;

See this fiddle

#sidebar{
display:block;
order:2;
}

#leftarea{
display:block;
order:1;
}

See order here