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>

bootstrap列订购网格移动桌面

1 个答案: