Bootstrap Grid-System

Question

I have been trying to solve this problem for a while now... I am currently learning web-development and implementing the bootstrap grid-system is one of the excercises. I looked at many resources but I still havn't found the answer.

The problem is that everything seems to be working fine. On all screen-sizes except between S and XS. For some reason the layout breaks. It looks the same when I am looking at it on my phone. I took a screenshot of how it looks then.

It would be great if someone could help me... Thank you

<div class="container-fluid">
    <h1>
        Work
    </h1>
    <div class="row" id="work1">
        <div class="col-xs-6 col-sm-3 col-md-3">
            <img class="img-responsive" src="img/image4.png">
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
            <p>
                Test your site out on your phone. It should look like this
                (well, without the cats! Please replace these images with
                screenshots and descriptions of your own work). Test your site
                out on your phone. It should look like this (well, without the
                cats!
            </p>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
            <img class="img-responsive" src="img/image4.png">
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
            <p>
                Test your site out on your phone. It should look like this
                (well, without the cats! Please replace these images with
                screenshots and descriptions of your own work). Test your site
                out on your phone. It should look like this (well, without the
                cats!
            </p>
        </div>
    </div>
    <div class="row" id="work2">
        <div class="col-xs-6 col-sm-3 col-md-3">
            <img class="img-responsive" src="img/image4.png">
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
            <p>
                Test your site out on your phone. It should look like this
                (well, without the cats! Please replace these images with
                screenshots and descriptions of your own work). Test your site
                out on your phone. It should look like this (well, without the
                cats!
            </p>
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
            <img class="img-responsive" src="img/image4.png">
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
            <p>
                Test your site out on your phone. It should look like this
                (well, without the cats! Please replace these images with
                screenshots and descriptions of your own work). Test your site
                out on your phone. It should look like this (well, without the
                cats!
            </p>
        </div>
    </div>
</div>

Answer 1

Since you'll be having more than 12 columns on XS devices, I think you'll need to add a clearfix for this particular viewport only:

<div class="col-xs-6 col-sm-3 col-md-3"><img src="img/image4.png" class="img-responsive"></div>
<div class="col-xs-6 col-sm-3 col-md-3"><p> Test your site out on your phone. It should look like this (well, without the cats! Please replace these images with screenshots and descriptions of your own work). Test your site out on your phone. It should look like this (well, without the cats! </p></div>

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

<div class="col-xs-6 col-sm-3  col-md-3"><img src="img/image4.png" class="img-responsive"></div>
<div class="col-xs-6 col-sm-3 col-md-3"><p> Test your site out on your phone. It should look like this (well, without the cats! Please replace these images with screenshots and descriptions of your own work). Test your site out on your phone. It should look like this (well, without the cats! </p></div>

Answer 2

+-----------+-----------+
|sm-6       |sm-6       |
|+----+----+|+----+----+|
||xs-6|xs-6|||xs-6|xs-6||
|+----+----+|+----+----+|
+-----------+-----------+

This is how you do what you want, you can't put more than 12col per row

When you need to do the xs6 + xs6 | xs6 + xs6 xs6 + xs6 | xs6 + xs6 you'll have to use nested row, and the parent one will split when needed.

http://www.bootply.com/pZ84zsBrqA

<div class="row" id="work1">
    <div class="col-sm-6">
        <div class="row">
            <div class="col-xs-6">
                <img class="img-responsive" src="img/image4.png">
            </div>

            <div class="col-xs-6">
                <p>
                    Test your site out on your phone. It should look like this
                    (well, without the cats! Please replace these images with
                    screenshots and descriptions of your own work). Test your
                    site out on your phone. It should look like this (well,
                    without the cats!
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6">
        <div class="row">
            <div class="col-xs-6">
                <img class="img-responsive" src="img/image4.png">
            </div>

            <div class="col-xs-6">
                <p>
                    Test your site out on your phone. It should look like this
                    (well, without the cats! Please replace these images with
                    screenshots and descriptions of your own work). Test your
                    site out on your phone. It should look like this (well,
                    without the cats!
                </p>
            </div>
        </div>
    </div>
</div>