Question

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

<div id="em31" class="myEm" data-items="55,58">some other value, another value</div>

一切都好，但是当我在一个较小的屏幕（移动设备）上时，div是这样的：

[left][right]

div需要这样的响应顺序：

[left]
[right]

因为右边包含应该乍一看的视频。

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

感谢您的帮助！

以下是我简要介绍的代码：

[right]
[left]

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>

Answer 2

您可以使用col-xs-push-＃和col-xs-pull-＃的Bootstrap类。其中＃是指定的列数。在您的情况下，您需要将视频播放器设置得足够大，以强制其他元素到达下一行。

此视频展示了如何操作。 https://www.youtube.com/watch?v=6UgQYdhy8uU&list=PL41lfR-6DnOovY0t3nBg8Zb6aqm_H70mR&index=7

响应网格上的Bootstrap div顺序

2 个答案: