不起作用的列的引导重新排序(特例)

Question

我有两列三行，一些框中有一些文本，另一些框中有一些图像。

例如，在移动屏幕上，这就是我所拥有的：

一个

B

C

D

E

F

当我把它放到更大的屏幕上时，我得到：

a.b

C D

英、法

但在更大的屏幕上我想：

a.b

D-C

英、法

所以D&C交换。我试过使用col push-6和col-xs-pl-6，但它似乎仍然不起作用。正如你在片段中看到的，当我把它放回移动形式时，它不会做我想做的事情。

​

.row{
  width:30px;
  height:100px;
}

.col-xs-6{
  height:50px;
  width:50px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
    <div class="row">
        <div class="col-xs-6 ">A</div>
        <div class="col-xs-6 ">B</div>
        <div class="col-xs-6 col-xs-push-6">D</div>
        <div class="col-xs-6 col-xs-pull-6">C</div>
        <div class="col-xs-6 ">E</div>
        <div class="col-xs-6 ">F</div>
    </div>
</div>

​

Answer 1

通过使用Bootstrap 4的排序效用类，我认为这是最简单的标记：

​

<div class="container">
    <div class="row">
        <div class="col-md-6 ">A</div>
        <div class="col-md-6 ">B</div>
        <div class="col-md-6 order-md-2">C</div>
        <div class="col-md-6">D</div>
        <div class="col-md-6 order-2">E</div>
        <div class="col-md-6 order-2">F</div>
    </div>
</div>

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

​

Answer 2

您需要使用flexbox排序类：

演示：https://www.codeply.com/go/xCHIz7D17v (alpha6)

<div class="row">
    <div class="col-md-6 flex-md-first">A</div>
    <div class="col-md-6 flex-md-first">B</div>
    <div class="col-md-6 flex-md-last">C</div>
    <div class="col-md-6 flex-md-first">D</div>
    <div class="col-md-6 flex-md-last">E</div>
    <div class="col-md-6 flex-md-last">F</div>
</div>

Alpha 6是不稳定的，4.0.0已经发布了。在这个最新版本中，排序类现在是order-*。

演示：https://www.codeply.com/go/FBlK8JJ3Ax (4.0.0)

Answer 3

查看flex-容器和order属性。

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

您还可以添加媒体@查询，根据宽度或高度设置order属性