Restack 3 DIV's for @media

Question

I have a page with buttons on the left, company name in middle, and buttons on right.

.left {
    float:left;
    padding-top:2%;
}

.name {
    margin:auto;
    width:60%;
    padding: 5%;
    float:left;
    text-align:center;
    }

.right{
    float:right;
    position: right;
    padding-top:2%;
}

<div class="left">Left</div>
<div class="name">Name</div>
<div class="right">Right</div>

I want an @media to make .name come before .left when viewing on mobile. Can you help me with his?