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

【问题标题】：css - three columns, same size on bigger devices, center element to get to top and two others below that on smaller devicescss - 三列，在较大的设备上大小相同，中心元素到达顶部，另外两列在较小的设备上低于
【发布时间】：2018-04-26 14:21:17
【问题描述】：

共有三列：

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 和c 拥有col-xs-4 col-sm-4。

这是执行此操作的标准方法吗？！

【问题讨论】：

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，通过谷歌或搜索SO，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

标签： css twitter-bootstrap-3 multiple-columns

【解决方案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>

感谢所有投反对票的人:)

【讨论】：

【解决方案2】：

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

<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>

【讨论】：