Css 引导：仅对xs屏幕使用div作为模式？

我在小屏幕上有两列引导布局。对于extra-smallsize类，我想在正常流中隐藏第二列，并将其用作模态的内容

这是否可能以优雅的方式实现（即不使用Javascript在DOM中移动）

例如：

<div class="row">
    <!-- Main Column -->
    <div class="col-sm-8 col-md-9">
        Main contents blah blah blah
    </div>
    <!-- Secondary Column -->
    <div class="col-sm-4 col-md-3">
        Other contents. These appear normally in sm, md, lg. In xs, it should be the contents of a modal.
    </div>
</div>

主要内容诸如此类
其他内容。这些通常出现在sm、md、lg中。在xs中，它应该是模态的内容。

示例模式（其中应显示第二列）：

&时代；
情态标题
这是我想要第二列的内容的地方
接近
保存更改

在引导中使用

隐藏-

属性

隐藏的xs-隐藏在超小的

隐藏sm-隐藏在小范围内

隐藏md-隐藏在超小

等等

---

选中此项

是的，可以使用jQuery的

$.html（）

函数获取列的html，然后再次使用

$.html（）

将其放置在模式中。这一点，再加上阿卜杜拉的建议，应该会给你想要的。下面是我创建的一个演示：

$（“#myModalBtn”）。单击（函数（）{
$（“#myModal.modal body”）.html（$（“#myModalContent”）.html（））；
$（#myModal”）.modal（“show”）；
});

主要内容诸如此类
启动演示模式
其他内容。这些通常出现在sm、md、lg中。在xs中，它应该是模态的内容。
&时代；
情态标题
这是我想要第二列的内容的地方
接近
保存更改
这解决了第一部分的问题，但我如何将其用作模态的内容？您能否在问题中添加一些示例代码。基本上：如何使列函数在>=small时正常运行，而使模态的内容在extra-small时正常运行？
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        This is where I want the contents from the secondary column
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>