3 divs regroup the div stack on mobile devices

Question

Desktop a - 30% b - 30% c - 70%

all 100% on mobile

Hi, I am trying to achieve the next layout, I learned to turn on and close a and b in the container, but it doesn’t work on the mobile phone, I’m sure that one of you css addicts has an answer. I am familiar with media queries.

this is what i got so far, what's wrong.

<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>

#a{
    width : 30%;
    background-color : black;
}
#b{
    width : 30%;
    background-color : orange;  
}
#c{
    width : 70%;
    background-color : green;
    float : right;
}

http://jsfiddle.net/YcJLL/

Answer 1

Check out http://jsfiddle.net/Ja7Bt/3/

Add float: rightin #cand float: leftin #afor the desktop.

and for mobile devices open width: auto, float: noneto#a, #b, #c

HTML

<div id="a">a</div>
<div id="c">c</div>
<div id="b">b</div>

CSS

    * {
    margin: 0;
}
#a{
    width : 30%;
    background-color : black;
    float: left
}
#b{
    width : 30%;
    background-color : orange;  
}
#c{
    width : 70%;
    background-color : green;
    float : right;
}
@media (max-width: 480px) {

#a, #b, #c {
    float: none;
    width: auto
}
}

Answer 2

<div id="a">a</div>
<div id="c">c</div>
<div id="b">b</div>

#a{
    float: left;
    width : 30%;
    background-color : black;
}
#b{
    float: left;
    width : 30%;
    background-color : orange;  
}
#c{
    width : 70%;
    background-color : green;
    float : right;
}
#a, #b, #c {
    color: white;
 }

@media (max-width: 480px) {
  #a, #b, #c {
    float: none;
    width: auto
  }
}

http://jsfiddle.net/amoljawale/Ja7Bt/1/

Answer 3

. . , .

<div class="left">
    <div id="a">a</div>
    <div id="b">b</div>
</div>
<div id="c">c</div>

CSS

  .left {
        width:30%;
        float:left
    }

http://jsfiddle.net/YcJLL/3/