Question

有三列：

b  a  c
|  |  |

在大型设备中。

我想向他们展示：

  a
  |
b   c
|   |

在小型设备上。

我的代码是：

<div class="col-xs-12 col-sm-4">
    b
</div>
<div class="col-xs-12 col-sm-4">
    a
</div>
<div class="col-xs-12 col-sm-4">
    c
</div>

我尝试使用jquery更改第一个div和第一个div的位置，然后保持a不变，b保持col-xs-8 col-sm-4和{{1}拥有c。

这是一种标准的方法吗？！

Answer 1

我自己做了：

<div class="hidden-sm hidden-md hidden-lg col-xs-12">
a //so it shows only on small devices
</div>
<div class="col-xs-8 col-sm-4">
b
</div>
<div class="hidden-xs col-sm-4">
a //so it shows only on large devices
</div>
<div class="col-xs-4">
c
</div>

非常感谢那些被投票的人：）

Answer 2

考虑使用CSS media queries。

这样的事情：

@media (max-width: 1024px) { ... }

仅将包含的CSS应用于小于指定宽度的设备。

Answer 3

像这样的东西。请查看https://getbootstrap.com/docs/4.0/layout/grid/这是一个非常好的文档。

＆＃13;

<div class="row">
  <div class="col-sm-4">
  </div>
  <div class="col-sm-4">
    <div class="row">
      <div class="col-sm-12"></div>
      <div class="col-sm-6"></div>
      <div class="col-sm-6"></div>
  </div>
  <div class="col-sm-4">
  </div>
</div>

＆＃13;

css - 三个列，相同大小的大型设备，中心元素到达顶部，另外两个低于较小的设备

3 个答案: