html - 尝试将侧边栏移到左侧及其后的主要内容

我正在尝试将侧边栏移到左侧，而主要内容紧随其后。现在，主要内容在左侧，侧边栏在右侧。两者都浮动到左侧，但主要内容在第一位。我希望侧边栏是第一个。

jsfiddle-http://jsfiddle.net/vzk8hqrq/

<section class="first_article">
    <article>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
        <img src="cupcake.jpg" alt="cupcake" class="cupcake">
    </article>
</section>

<aside class="sidebar">
    <nav>
        <ul>
            <li>home</li>
            <li>about us</li>
            <li>orders</li>
            <li>gallery</li>
            <li>contact</li>
        </ul>
    </nav>
</aside>



.first_article{
float:left;
border:1px solid black;
width:500px;
}

.sidebar{
float:left;
}

最佳答案

只是更改了此内容：在<aside class="sidebar">之前带了<section class="first_article">

Working Fiddle

<aside class="sidebar">
    <nav>
        <ul>
            <li>home</li>
            <li>about us</li>
            <li>orders</li>
            <li>gallery</li>
            <li>contact</li>
        </ul>
    </nav>
</aside>

<section class="first_article">
    <article>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
        <img src="cupcake.jpg" alt="cupcake" class="cupcake">
    </article>
</section>