html - Bootstrap 列排序网格移动桌面

Question

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

3 个 div 是:

• 注册
• 新职位
• 新闻

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

signup
new post
news

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

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

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

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

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

编辑 - 根据下面的评论，结合推和拉应该可以为您提供所需的移动尺寸行排序输出: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>