如何在引导程序的帮助下在 CSS 中订购 div？答案

【问题标题】：how to order div in css with help of bootstrap?如何在引导程序的帮助下在 CSS 中订购 div？
【发布时间】：2017-05-21 06:00:32
【问题描述】：

我想要这样的布局

桌面

| 1 | 2 | 3 |

平板电脑和手机

| 2 |
| 1 |
| 3 |

【问题讨论】：

stackoverflow.com/questions/21075983/…
How to use particular CSS styles based on screen size / device的可能重复
这不是上面链接的问题的完全重复，因为他还想改变元素的顺序，这不是微不足道的。但这也在this question 的回答中得到了解决

标签： javascript html twitter-bootstrap css

【解决方案1】：

这可以通过 JQuery Dom 操作来完成。

$(window).resize(function () {
    if ($(window).width() < 480) {
        $("#one").insertAfter($("#two"));
    } else {
        $("#two").insertAfter($("#one"));
    }
});


<div class="row">
  <div id="one" class="col-sm-4">1</div>
  <div id="two" class="col-sm-4">2</div>
  <div id="three" class="col-sm-4">3</div>
</div>

如果窗口大小低于 480px，jQuery 代码块将在 div with id two 之后插入 div with id one，因此，div 2 将位于顶部，布局将类似于 2,1,3

否则它会按照1,2,3.这样的顺序排列div

在这里查看：https://jsfiddle.net/gt8a3f7x/2/

【讨论】：

你能在 jsfiddle 上与我合作吗jsfiddle.net/gt8a3f7x/#&togetherjs=tktGbx5mJt
我认为你应该加入jsfiddle.net/gt8a3f7x/2/#&togetherjs=ypOsUwPElf 然后只有我会明白它是怎么回事？
@SagarMistry 看到这个stackoverflow.com/questions/26993053/…

【解决方案2】：

用类行制作一个包装器 div，然后在里面放置类 col-md-12 col-lg-4 的 div 中小屏幕为 12 列宽（全宽），桌面为 4 列宽（4 *3 = 12）就是这样！

【讨论】：

你可以自己实现，或者在bootstrap网站上观看
让你正确链接引导 css 和 js（在标题上）。也许您需要另一个用于整个页面的包装器，带有“容器”类
我已经添加了引导链接，我尝试了 javascript，但我也没有得到我想要的

【解决方案3】：

<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">1</div>
  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">2</div>
  <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">3</div>
</div>

【讨论】：

您好，欢迎来到 Stack Overflow。仅代码的答案通常会被标记为删除，因此请务必添加一些解释。我意识到这是可行的，但也许可以解释一下 -sm -md -xs 断点类？

【解决方案4】：

按照应该在手机或平板电脑上的方式排列块。
使用offsetting columns 更改宽屏上的列顺序：

<div class="col-sm-4 col-sm-push-4">2</div>
<div class="col-sm-4 col-sm-pull-4">1</div>
<div class="col-sm-4">3</div>

请检查结果：

/* Decorations */
.row.decorations > div {
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  min-height: 80px;
  padding-top: 6px; 
}
.row.decorations > div:nth-of-type(1) { background: #9c6; }
.row.decorations > div:nth-of-type(2) { background: #f93; }
.row.decorations > div:nth-of-type(3) { background: #69c; }

/* fix SO stick navigation ;) */
@media (min-width: 768px) { .row.decorations { margin-top: 75px; } }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row decorations">
    <div class="col-sm-4 col-sm-push-4">2</div>
    <div class="col-sm-4 col-sm-pull-4">1</div>
    <div class="col-sm-4">3</div>
  </div>
</div>

【讨论】：