html - 使用推拉时 Bootstrap 崩溃

Question

我正在使用基本的 Bootstrap 功能根据屏幕宽度更改列位置。

对于大型和中型，我想在第 1 列之前显示第 2 列。对于小的，我想先显示第 1 列，然后显示第 2 列。这是有效的，但我面临的问题是列从 row 容器中断开并在屏幕小于 1000 像素时占据全宽。我怎样才能保留容器类 container content-wrapper

<div class="main-wrapper">
<div class="container content-wrapper"> 
        <div class="row"> 
            <div class="col-md-5 col-sm-push-7 gb-red">
            1 IMAGE
            </div>
            <div class="col-md-7 col-sm-pull-5 gb-green">
                2 TEXT
            </div>
        </div>
    </div>
    </div>

CodePen https://codepen.io/anon/pen/aYjQVZ

Answer 1

在您的版本中，它因 bootstrap 中的断点 而崩溃。

/* Small devices (tablets, 768px and up) 'sm'

/* Medium devices (desktops, 992px and up) md

/* Large devices (large desktops, 1200px and up) 'lg'

您只提到了 'md' 和 lg ，这就是为什么您的代码从 (992px 到 768px)

我分别插入了 col-sm-5 和 col-sm-7 以避免崩溃.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main-wrapper">
    <div class="container content-wrapper"> 
        <div class="row"> 
            <div class="col-md-5 col-sm-5  col-sm-push-7 bg-info">
                Col 1111
            </div>
            <div class="col-md-7 col-sm-7 col-sm-pull-5 bg-danger">
                Col 2222
            </div>
        </div>
    </div>
</div>