Question

我试图弄清楚如何使用Bootstrap获得正确的订购。我可以垂直或水平卡住。

桌面显示如下：

[ - 2 - ] [1]
[ - 2 - ] [3]
[ - 2 - ]

移动应显示如下：

[ - 1 - ]
[ - 2 - ]
[ - 2 - ]
[ - 2 - ]
[ - 3 - ]

而[2]是单个元素，只是更高。

这是我有多远。这显然是错误的，因为它在桌面上看起来不错，但在移动设备上却看不到。

<div class="container">
<div class="row">
    <div class="col-sm-4 col-sm-push-8">
        <div class="row">
            <div class="box-a col-sm-12">1</div>
            <div class="box-b col-sm-12">3</div>
        </div>
    </div>
    <div class="box-c col-sm-8 col-sm-pull-4">2</div>
</div>
</div>

http://jsfiddle.net/6L2otx3w/

我被困在了专栏上。但如果我先尝试移动：

<div class="container">
   <div class="row">
      <div class="col-sm-4 col-sm-push-8 box-a"> 1</div>
      <div class="box-c col-sm-8 col-sm-pull-4">2</div>
    </div>
   <div class="row">   
     <div class="box-b col-sm-4 col-sm-offset-8"> 3</div> 
   </div>
<div>

http://jsfiddle.net/yvdf5p8k/

我被卡在行上（在移动设备上看起来很好，但在桌面上看起来不太好。）

Answer 1

我是通过拉动列并在移动设备（xs）上将它们全部设置为12列来实现的。您可以将sm断点更改为您想要的任何值。

查看小提琴：http://jsfiddle.net/heraldo/yvdf5p8k/1/

<div class="container">
    <div class="row">
        <div class="box-a col-xs-12 col-sm-4 pull-right"> 1</div>
        <div class="box-c col-xs-12 col-sm-8 pull-left">2</div>
        <div class="box-b col-xs-12 col-sm-4 pull-right"> 3</div>
    </div>
</div>

Answer 2

我认为bootstrap没有能力做到这一点。

[ - 2 - ] [1]

[ - 2 - ] [3]

[ - 2 - ]

移动设备应显示如下：

[ - 1 - ]

[ - 2 - ]

[ - 3 - ]

如果这样可以。

[ - 2a - ] [1]

[ - 2b - ] [3]

[ - 2c - ] [4]

移动设备应显示如下：

[ - 1 - ]

[ - 2a - ]

[ - 3 - ]

[ - 2b - ]

[ - 4 - ]

[ - 2c - ]

＆＃13;

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<div class="container">
  <div class="row">
    <div class="bg-primary col-sm-4 col-sm-push-8">1</div>
    <div class="bg-danger col-sm-8 col-sm-pull-4">2a</div>
    <div class="bg-warning col-sm-4 col-sm-push-8">3</div>
    <div class="bg-success col-sm-8 col-sm-pull-4">2b</div>
    <div class="bg-primary col-sm-4 col-sm-push-8">4</div>
    <div class="bg-info col-sm-8 col-sm-pull-4">2c</div>
  </div>
</div>

＆＃13;

Answer 3

我试图通过使用引导程序给我们的默认类来解决它但我找不到方法因此我选择了this：

HTML

您可以看到行“3”重复，以便在移动设备上进行订购。

<div class="container">
    <div class="row">
        <div class="col-sm-4 col-sm-push-8">
            <div class="row">
                <div class="box-a col-sm-12">1</div>
                <div class="box-b col-sm-12">3</div>
            </div>
        </div>
        <div class="box-c col-sm-8 col-sm-pull-4">2</div>
        <div class="box-b2 col-xs-12">3</div>     
    </div>
</div>

CSS

我是通过在移动设备上将显示无添加到 box-b 而将显示无添加到 box-b2 在桌面上。

.box-b { background-color: lavender; display:none; }
.box-b2 { background-color: lavender; }
.box-c { background-color: orange; height: 60px;}

@media (min-width: 768px) {
  .box-b{
    display:block;
  }
 .box-b2{
    display:none;
  }
}

请告诉我，如果它可以帮助你，如果它是你想要的，谢谢你。

Bootstrap网格元素顺序（在另一个元素的上方和下方）

3 个答案: