html - Bootstrap - 列不会在 xs 上垂直堆叠

Question

我肯定在这里遗漏了一些明显的东西，但我是 Bootstrap 的初学者，我不知道它可能是什么。我试图让这张图片和相邻的段落在 xs 屏幕上垂直堆叠。无论我做什么，它们都只是并排排列，将图片推到屏幕边缘。这是正在发生的事情的图片和我的代码。

        <div class="row para-text vertical-align">
            <div class="col-xs-12 col-md-8 col-md-push-4">
                <p>text....</p>
            </div>
            <div class="clearfix visible-sm-block"></div>
            <div class="col-xs-12 col-md-4 col-md-pull-8">
                <img class="img-full" src="img/artesia1.jpg" alt="">
            </div>
        </div>

这是我添加的 css 样式，以防出现问题

.para-text {
padding:15px;
}

.vertical-align {
    display: flex;
    align-items: center;
}

Answer 1

我建议不要使用您发布的 css 类。当我用你的 html 代码做了一个简单的例子但没有 css 时，它似乎工作正常:

请参阅:http://www.bootply.com/GCu0vDtk6K

注意:我还删除了您的:

<div class="clearfix visible-sm-block"></div>