Siyu Siyu - 4 months ago 48
CSS Question

bootstrap grid system col-xs-12 not working

<header class="row">
<div class="logo-box col-sm-6 col-xs-12">
<img class="header-logo img-responsive" src="https://s3-us-west-1.amazonaws.com/udacity-content/rebrand/svg/logo.min.svg" alt="udacity logo" />
</div>
<div class="nametag col-sm-6 col-xs-12">
<h1>SIYU WU</h1>
<p class="personal-title">
FRONT-END WEB DEVELOPER
</p>
</div>
</header>


The related style are shown below:

header {
display: flex;
}
.logo-box {
padding-top: 40px;
height: 120px;
}

.header-logo {
width: 300px;
height: 53px;
}

.nametag {
padding-top: 20px;
height: 120px;
}


I'm using bootstrap's framework but it seems not working. The two div each take 50% width no matter the screen size. But if I remove the second div the 1st one will take 100% width at xs size screen.

Answer

The bootstrap columns system depends on the display of the .row being block.

By changing it to flex, you've broken it. The children of flex elements have different rules for wrapping.