CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Kathryn Crawford
Kathryn Crawford

Reputation: 611

Bootstrap - Columns will not stack vertically on xs

I must be missing something obvious here, but I am a beginner with Bootstrap and I have no idea what it could be. I'm trying to get this picture and the adjacent paragraph to stack vertically on xs screens. No matter what I do, they just line up alongside each other, pushing the picture to the edge of the screen. Here's a picture of what is happening, and my code.

Picture of improper stacking

        <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>

Here are the css styles I've added, in case those are causing problems

.para-text {
padding:15px;
}

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

Upvotes: 0

Views: 61

Answers (2)

Kathryn Crawford
Kathryn Crawford

Reputation: 611

Looks like my problem was using Flexbox. I've opted out of using it and am going to find a different way to vertical align the image so that I can have better browser support.

Upvotes: 0

Hieu Le
Hieu Le

Reputation: 728

I would recommend not using your css classes that you posted. When I did a simple example with your html code but no css, it seems to work fine:

Please see: http://www.bootply.com/GCu0vDtk6K

Note: I also removed your: 

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

Upvotes: 1

Related Questions