3 div在移动设备上重新排列div堆栈

Question

桌面 a - 30％ b - 30％ c - 70％

全部100％在移动设备上

嗨试图实现以下布局，教导关于在容器中包含a和b，但是不能在移动设备上工作，我敢肯定你们其中一个css瘾君子，有答案。 我熟悉媒体查询。

这是我到目前为止所做的不正确

<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

检查http://jsfiddle.net/Ja7Bt/3/

将float: right添加到#c，将float: left添加到#a以获取桌面。

和移动设备将width: auto, float: none提交给#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/