Question

我是Bootstrap的新手，我有一个六列的联系表格，当我在智能手机上查看它时，我看到顶部的按钮，或者一般情况下，我看到顺序与我相反需要，这是代码：我看到了推送的样本，

<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>

但如何用六列做到这一点？

<div class="row">
<div class="col-sm-4 col-md-4">
    <div class="row">
        <div class="col-sm-12 col-md-6" >div1</div>
        <div class="col-sm-12 col-md-6" >div2</div>
    </div>
</div>
<div class="col-sm-4 col-md-4">
    <div class="row">
        <div class="col-sm-12 col-md-6" >div3</div>
        <div class="col-sm-12 col-md-6" >div4</div>
    </div>
</div>
<div class="col-sm-4 col-md-4">
    <div class="row">
        <div class="col-sm-12 col-md-6" >div5</div>
        <div class="col-sm-12 col-md-6" >div6</div>
    </div>
</div>

我该怎样扭转排序

Answer 1

在Bootstrap中以正确的方式编写时，您正在做的事情要简单得多。请尝试以下代码段：

<div class="container">
    <div class="row">
        <div class="col-md-2 col-sm-4">div1</div>
        <div class="col-md-2 col-sm-4">div2</div>
        <div class="col-md-2 col-sm-4">div3</div>
        <div class="col-md-2 col-sm-4">div4</div>
        <div class="col-md-2 col-sm-4">div5</div>
        <div class="col-md-2 col-sm-4">div6</div>
    </div>
</div>

当在中等大小的屏幕上时，div会显示在一行中，但当你进入小屏幕时，则会叠加显示连续显示3个div，当你进入额外的小屏幕时，div将叠加到只显示一个连续。

试试这个并通知我，如果你能够实现正确的布局。

更新代码：

<div class="container">
    <div class="row">
        <div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div1</div>
        <div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div2</div>
        <div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div3</div>
        <div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div4</div>
        <div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div5</div>
        <div class="col-md-2 col-sm-4">div6</div>
        <div class="col-md-2 col-sm-4 visible-xs">div5</div>
        <div class="col-md-2 col-sm-4 visible-xs">div4</div>
        <div class="col-md-2 col-sm-4 visible-xs">div3</div>
        <div class="col-md-2 col-sm-4 visible-xs">div2</div>
        <div class="col-md-2 col-sm-4 visible-xs">div1</div>
    </div>
</div>

您无法撤消订单，但可以使用额外的div来实现此功能。让我们在第6个div下面多花5 div s，然后按相反的顺序排列。这些div只会出现在手机屏幕上。同时在手机屏幕上隐藏上述5个div。所以现在在移动屏幕上你会看到相反的div。

Answer 2

正如评论中的用户所说，请将您的CSS移动到外部.css文件，这样更容易阅读和帮助，

请使用Plunkr或类似内容，以便人们更好地了解您的问题。

尝试从外部div中删除dir = rtl，您也可以阅读有关Twitter Bootstrap的Helper Classes

的内容

这是一个简单的引导网格示例，在＆＃39; xs＆＃39;屏幕每个div将占用6（1/2）的可用空间。

<div class="container">
  <div class="row">
    <div class="col-sm-8 col-xs-6">.col-md-1</div>
    <div class="col-sm-4 col-xs-6">.col-md-2</div>
  </div>
</div>

请参阅此plunkr例如

BootStrap如何以反向div的顺序？

2 个答案: