引导列排序网格移动桌面

Posted 2023-03-05

【中文标题】引导列排序网格移动桌面

【英文标题】：bootstrap column ordering grid mobile desktop

【发布时间】：2016-10-11 07:21:12

【问题描述】：

我有 3 个 div，我想以特殊方式在桌面上排列。

这 3 个 div 是：

注册 新帖子 新闻

在移动设备中应该像这样相互堆叠：

signup
new post
news

但在桌面上应该是这样的：

[news - 8 size] [signup - 4 size]
                [new post - 4 size]

我使用了引导推拉功能，但仍然找不到神奇的解决方案。

我的代码：http://codepen.io/tzookb/pen/beEvVd

【问题讨论】：

为什么不使用 2 行？

请告诉我如何，不知道如何移动行：/

【参考方案1】：

像这样？ https://jsfiddle.net/xu47j54f/

有很多方法可以做到这一点......

您可以在第二列中使用嵌套行，如下所示：

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      Column 1
    </div>
    <div class="col-sm-6">
      <div class="row">
        <div class="col-xs-12">
          Column 2 - Row 1
        </div>
        <div class="col-xs-12">
          Column 2 - Row 2
        </div>
      </div>
    </div>
  </div>
</div>

编辑 - 根据下面的 cmets，结合 push 和 pull 应该可以为您提供所需的移动大小的行排序输出：https://jsfiddle.net/xu47j54f/1/

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-sm-push-6">
      <div class="row">
        <div class="col-xs-12">
          Column 2 - Row 1
        </div>
        <div class="col-xs-12">
          Column 2 - Row 2
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-sm-pull-6">
      Column 1
    </div>
  </div>
</div>

【讨论】：

感谢您的帮助，但在您根据需要提供的示例中，这意味着“第 2 列 - 第 2 行应该在左上角。在您的版本中，它仍然在右下角

第二个例子是一样的...看看我的描述，看看 div 应该如何对齐

@TzookBarNoy，在这种情况下，您可以使用组合的拉/推方法：jsfiddle.net/xu47j54f/1

之前的评论似乎是合法的，让我测试一下:)

@TzookBarNoy 没问题 - 我现在也将它添加到我的答案中。