javascript - 响应式网格上的 Bootstrap div 顺序

Question

我在 bootsrap 布局中有一个 2 列布局，如下所示:

[left][right]

一切正常，但是当我在较小的屏幕(移动设备)上时，div 是这样的:

[left]
[right]

要求div在responsive中有这样的顺序:

[right]
[left]

因为右侧包含一个应该第一眼看到的视频。

关于如何做到这一点的任何想法，理想情况下除了 bootsrap 提供的之外没有额外的 css 或 javascript？

感谢您的帮助!

这里是我的代码简而言之:

<div class="container">
<div class="row">
    <div class="col-md-6">
        text
    </div>
    <div class="col-md-6 video-box">
        video
    </div>
</div>
</div>

Answer 1

Bootstrap 是一个“移动优先”的框架，所以按照您希望它们在移动设备上的顺序放置 div，然后在右侧的 div 上使用 col-md-push-*，并且 col-md-pull-* 在你的左边，以在更大的屏幕尺寸上排列它们。

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-pull-6 video-box">
            video
        </div>
        <div class="col-md-6 col-md-push-6">
            text
        </div>

    </div>
</div>