Html 引导列排序网格移动桌面

我有三个div，我想在桌面上安排一个特殊的方式

三个分区是：

• 报名
• 新职位
• 新闻

在移动设备中，应按如下方式相互堆叠：

signup
new post
news

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

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

signup
new post
news

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

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

我的代码：

像这样吗

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

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

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

第1栏
第2列-第1行
第2列-第2行

编辑-根据下面的评论，推拉组合应该可以提供移动大小的行排序所需的输出：

第2列-第1行
第2列-第2行
第1栏

为什么不使用两行？请告诉我如何移动行，不知道如何移动行：/谢谢您的帮助，但在我需要的示例中，这意味着“第2列-第2行应位于左上角。”。。在你的版本中，它仍然在右边的底部。第二个例子是相同的。。。看一下我的描述，看看div应该怎么做align@TzookBarNoy，在这种情况下，您可以使用拉/推组合方法：前面的评论似乎是合法的，让我测试一下：）@TzookBarNoy没问题-我现在也在回答中添加了它。