jquery - 两个 div 并排 : how can i make the div that is on the left side go down when it breaks for responsive layout?

Question

friend 们下午好

我在构建响应式布局时遇到问题:目前，我有两个并排放置的 div 用于计算机显示器。当我在移动设备上查看网站时，右侧的 div 中断并下降(如预期的那样)。但是，我希望这个过程可以逆转。有没有办法让左边的div往下，右边的div在上面？

我正在尝试使用“推”和“拉”类，但效果不佳，因为计算机上的“B 类”div 远离屏幕左侧，就好像他有声明边距或填充。

你可以在这里看到我的网站: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 元素，只需使用 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>