Question

下午好朋友，

构建响应式布局时遇到问题：目前，我有两个div并排放置在计算机显示器上。当我在移动设备上查看该站点时，右侧的div获得中断并下降（如预期的那样）。但是，我希望这个过程能够逆转。有没有办法让左边的div下降，右边的div保持在顶部？

我正在尝试使用“推”和“拉”类，但它工作得不好，因为计算机上的div“B级”远离屏幕左侧，好像他有申报保证金或填补。

您可以在此处查看我的网站：http://sosejaculacaoprecoce.com.br/right-sidebar/

<div class="row">
    <div class="col-md-9 col-md-push-9">
        <div class="B">B</div>
    </div>
    <div class="col-md-3 col-md-pull-3">
        <div class="A">A</div>
    </div>
</div>

my goal is:

on computer:
row______________
| _____  _______ |
| |  a  ||   b  ||
| |_____||______||
|________________|  

on mobile:                
 ____
|  b |
|____|
 ____
| a  |
|____|


WHAT IS HAPPENING ON COMPUTER:
row______________
|        _____  _|____
|       |  a  ||   b  |
|       |_____||______|
|________________|

即使使用检查器，也没有边距或填充语句。你知道怎么解决吗？

Answer 1

你应该添加一些代码。

但是，您可以在另一个容器上应用float: left;，而不是应用float: right;。

Answer 2

这取决于您的实施。如果您使用的是网格系统，他们中的大多数都能够“推动”＃34;或者＆＃34;拉＆＃34;网格中的元素。您应该按照希望在最小的设备上显示的顺序设置内容，并使用＆＃34; push＆＃34;并且＆＃34;拉＆＃34;修改职位的班级。

如果您没有使用网格系统并且只是浮动元素，请使用float:right代替float:left。

每条评论更新：

<div class="row">
    <div class="col-md-9 col-md-push-3">
        <div class="B">B</div>
    </div>
    <div class="col-md-3 col-md-pull-9">
        <div class="A">A</div>
    </div>
</div>

Answer 3

一个基本的，无框架的方法可能是在某个窗口断点被击中时翻转元素的浮点值：

#firstDiv { float:left; }
#secondDiv { float: right; }

@media screen and (min-width:400px) {
    #firstDiv { float: right; }
    #secondDiv { float: left; }
}

这是jsfiddle。

编辑：由于您现在已经提到过使用Bootstrap，因此可以通过以下更改实现该结果（假设您使用的是bootstrap 3，并且您希望每个面板在并排时占据一半的行：

HTML：

 <div class="B col-md-6 col-xs-12">B</div>
 <div class="A col-md-6 col-xs-12">A</div>

CSS：

.A { float: left; }
.B { float: right; }

这是jsfiddle。

两个div并排：当它为响应式布局打破时，如何使左侧的div下降？

3 个答案: