Question

首先，我看到很多关于这个问题的主题，如Here和Here。但问题没有解决！

我需要重新排序两行。我有这个：

HTML：

<div class="row first-row">
  <div class="col-xs-6">Col-1</div>
  <div class="col-xs-6">Col-2</div>
</div>
<div class="row second-row">
  <div class="col-xs-6">Col-3</div>
  <div class="col-xs-6">Col-4</div>
</div>

DEMO

我需要使用first-row重新排序second-row。

任何帮助都将不胜感激。

Answer 1

如果你有一个div包装行，你可以使用它：

＆＃13;

.wrapper {
  width: 100%;
  display: table;
}

.first-row {
  background: blue;
  display: table-row-group;
}

.second-row {
  background: red;
  display: table-header-group;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
  <div class="row first-row">
    <div class="col-xs-6">
      Col-1
    </div>
    <div class="col-xs-6">
      Col-2
    </div>
  </div>
  <div class="row second-row">
    <div class="col-xs-6">
      Col-3
    </div>
    <div class="col-xs-6">
      Col-4
    </div>
  </div>
</div>

＆＃13;

Answer 2

这是一个很好的小技巧，可以颠倒子元素的顺序，将它包裹在你的行中：

.reverse-order {
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
}

.reverse-order > div,
.reverse-order > span,
.reverse-order > li {
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
}

<强> JSFiddle

它的作用：它只是垂直翻转每个子元素，然后再次翻转整个元素。这只能垂直工作。水平地，您应该使用-push和-pull

Answer 3

您可以将first-row置于绝对位置，然后将其推到底部

CSS

.container {
  padding: 0;
  position: relative;
}

.first-row {
  background: blue;
  position: absolute;
  top: 100%;
  width: 100%;
}

.second-row {
  background: red;
}

HTML

<div class="container">
  <div class="row first-row">
    <div class="col-xs-6">Col-1</div>
    <div class="col-xs-6">Col-2</div>
  </div>
  <div class="row second-row">
    <div class="col-xs-6">Col-3</div>
    <div class="col-xs-6">Col-4</div>
  </div>
</div>

如何在Bootstrap 3

3 个答案: