如何在移动版上交换第一个div和最后一个div？

Question

我有如下的div元素。

<div class="row">
  <div class="col-sm-12" id="first-row"></div>
  <div class="col-sm-12" id="second-row"></div>
  <div class="col-sm-12" id="third-row"></div>
  <div class="col-sm-12" id="fourth-row"></div>
</div>

如何在移动设备上使用CSS仅交换第一行div和第四行div？ 我能否只用CSS实现这一点？达成此目标的最佳策略是什么？我可以使用JavaScript实现此操作，但想知道是否可以仅使用CSS。我正在使用bootstrap 3。

移动设备上预期的结果：

<div class="row">
    <div class="col-sm-12" id="fourth-row"></div>
    <div class="col-sm-12" id="second-row"></div>
    <div class="col-sm-12" id="third-row"></div>
    <div class="col-sm-12" id="first-row"></div>
</div>

- N Nem

---

对于纯CSS方法，您可以使用两个div和bootstrap类.hidden-lg、.hidden-md等以及.visible-sm、.visible-xs。包含的div可以使用这些类。不过，flexbox方法可能更好。 - slasky

你考虑过使用Bootstrap-4吗？你可以尝试快速交换库：https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css。从你的代码和Bootstrap-4的例子中可以看出，通过媒体查询和“order”轻松进行交换：@media screen and (max-width : 600px) {
.row > :first-of-type{order:1;} .row > :last-of-type {order:-1;}
}。我只是发表了一条评论，因为你说要使用Bootstrap 3 ;)，但如果你愿意，这也可以成为一个答案。 - G-Cyrillus

Answer 1

如果您在行上使用flexbox，可以使用order属性来实现此目的。(您可以使用媒体查询将display: flex添加到目标移动设备)。

请查看下面演示中fourth-row和first-row位置如何交换：

div.row {
  display: flex;
  flex-direction: column;
}

[id$='-row'] {
  order: 2;
}
#first-row {
  order: 3;
}
#fourth-row {
  order: 1;
}

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

<div class="row">
  <div class="col-sm-12" id="first-row">1</div>
  <div class="col-sm-12" id="second-row">2</div>
  <div class="col-sm-12" id="third-row">3</div>
  <div class="col-sm-12" id="fourth-row">4</div>
</div>

- kukkuz

Answer 2

如果您只想在不同的屏幕尺寸下更改外观，可以使用默认的Bootstrap网格排序：

https://getbootstrap.com/docs/3.3/css/#grid-column-ordering

这里查看响应式结果可能更容易：https://codepen.io/anon/pen/vJQmXq

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-12 col-md-3 col-md-push-9" id="fourth-row">4</div>
  <div class="col-sm-12 col-md-3" id="second-row">2</div>
  <div class="col-sm-12 col-md-3" id="third-row">3</div>
  <div class="col-sm-12 col-md-3 col-md-pull-9" id="first-row">1</div>
</div>

- DimSum

Answer 3

这里有一个使用 jQuery 的解决方案 https://jsfiddle.net/68bfxozm/1/

var updateDivOrder = function() {
  if($(document).width() < 500){
    var first = $('#first-row').clone();
    var last = $('#fourth-row').clone();
    $('.row div').first().remove();
    $('.row div').last().remove();

    $('.row div').first().before(last);
    $('.row div').last().after(first);
  } else {
    var first = $('#first-row').clone();
    var last = $('#fourth-row').clone();
    $('.row div').first().remove();
    $('.row div').last().remove();

    $('.row div').first().before(first);
    $('.row div').last().after(last);
  }
}

updateDivOrder();

$(window).resize(updateDivOrder);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-12" id="first-row">1</div>
  <div class="col-sm-12" id="second-row">2</div>
  <div class="col-sm-12" id="third-row">3</div>
  <div class="col-sm-12" id="fourth-row">4</div>
</div>

我的假设是移动宽度将小于500像素。

希望这能帮到你。

- Shiladitya

Answer 4

使用Flex属性交换元素。这里有一篇关于此的文章Reverse Elements Order。

无法演示仅限移动设备部分，请使用以下CSS。

@media only screen and (min-width : 480px) {
    .row { display: flex; flex-direction: column-reverse; }
}

$('button').on('click', function(){
 $('.row').toggleClass('row-reverse');
})

.row-reverse { display: flex; flex-direction: column-reverse; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-12" id="first-row">first</div>
  <div class="col-sm-12" id="second-row">second</div>
  <div class="col-sm-12" id="third-row">third</div>
  <div class="col-sm-12" id="fourth-row">fourth</div>
</div>
<button>reverse/unreverse</button>

- Naren Murali

---

@kukkuz，原帖中说“如何在移动设备上交换第一行div和第四行div？”让我在我的答案中修改一下，谢谢！ - Naren Murali