Question

我有2列和3行，其中一些框中有一些文字，另一些则有一些图像。

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

A
B
ç
d
Ë
˚F

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

A B
C D
E F

但是在我想要的大屏幕上：

A B
D C
E F

所以D＆amp; C交换。我尝试过使用col-xs-push-6和col-xs-pull-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

您需要使用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已发布。在此最新版本中，ordering classes现在为order-*

演示：https://www.codeply.com/go/FBlK8JJ3Ax（ 4.0.0 ）

Answer 2

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

＆＃13;

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

＆＃13;

Answer 3

看看flex-container和订单属性

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

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

列无法正常工作的引导重新排序（特定情况）

3 个答案: