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做一个简单的例子时，它似乎工作正常：

请参阅：https://drive.google.com/file/d/0ByjklWbi44oBZDhocGdNLWNvUWM/view?usp=sharing

注意：我也删除了你的：

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

Answer 2

看起来我的问题是使用Flexbox。我选择不使用它，我会找到一种不同的方式来垂直对齐图像，以便我可以获得更好的浏览器支持。