使用引导程序 3 重新排序

Posted 2023-03-05

【中文标题】使用引导程序 3 重新排序

【英文标题】：Reordering with bootstrap 3

【发布时间】：2015-08-08 03:09:30

【问题描述】：

有人可以帮助我使用引导程序 3 对下面的列重新排序：

 ----- ----- -----
|  1  |  2  |  3  |
 ----- ----- -----

到这里：

 -----
|  2  |
 -----
|  1  |
 -----
|  3  |
 -----

我知道这与推/拉有关，但我似乎无法正确理解。

编辑

还有一些我无法工作的代码：

<div class="row">
    <div class="col-md-8 col-xs-12">2</div>
    <div class="col-md-2 col-xs-12 col-md-push-2">1</div>
    <div class="col-md-8 col-xs-12 col-md-pull-2">3</div>
</div>

在移动设备上看起来不错，但在桌面设备上却不行。

解决方案

<div class="row">
    <div class="col-md-8 col-xs-12 col-md-push-2">2</div>
    <div class="col-md-2 col-xs-12 col-md-pull-8">1</div>
    <div class="col-md-8 col-xs-12">3</div>
</div>

【问题讨论】：

你试过了吗，能不能发一些代码

首先考虑移动设备并将 div-2 放在首位。 ***.com/questions/26466407/…

我通常最终将它们分成重复的 div，因此上面的“1”将具有类 hidden-xs，而下面的副本具有类 visible-xs。有意义吗？

我之前也遇到过同样的问题。试试这个，肯定对你有帮助：***.com/questions/20171408/…

看看这个 - scotch.io/tutorials/reorder-css-columns-using-bootstrap

【参考方案1】：

为每个类使用自定义类并使用弹性框 CSS 概念。

HTML

<div class="row">
  <div class="col-md-4 one">First box</div>
  <div class="col-md-4 two">Second Box</div>
  <div class="col-md-4 three">Third Box</div>
</div>

CSS

.row 
  display: flex;
  flex-direction: column;


.one 
  order: 2;


.two 
  order: 1;


.three 
  order: 3;

Codeply

【讨论】：

对于我的项目，我需要使用引导推/拉，但是您的示例代码可以正常工作，谢谢 ;o)

【参考方案2】：

这很简单，关键是我们不能在移动模式下重新排序列。我们应该首先将其视为移动设备，然后使用 .col-*-push-#、.col-*-pull-# 辅助类在大屏幕上重新排序列：

.red 
    background: red;

.blue 
    background: blue;

.green 
    background: green;

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="red col-sm-4 col-sm-push-4">2</div>
        <div class="green col-sm-4 col-sm-pull-4">1</div>
        <div class="blue col-sm-4">3</div>
    </div>
</div>