Bootstrap grid columns not stacking before content overlaps

Question

I'm trying to display the details of an email side by side (this is only a section of the full page) but the details from the row containing the from/to and date/cc/bcc information overlap a lot before stacking when the page resizes and I'd like them to stack before this problem arises. The following is the simplified version of what I have:

<div>
    <div class="row">
        <div class="col-xs-10">
            <span style="font-weight:bold;" data-bind="text:Subject"></span>
        </div>
        <div class="col-xs-2">
            <button class="btn btn-default" style="float:right; height:30px;">
                <img src="..." style="max-height:20px; border:none;" />
            </button>
        </div>

        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-2">
                    <div class="row">
                        <div class="col-xs-12">From: </div>
                        <div class="col-xs-12">&nbsp;</div>
                        <div class="col-xs-12">To: </div>
                    </div>
                </div>
                <div class="col-xs-10">
                    <div class="row">
                        <div class="col-xs-12">FromName</div>
                        <div class="col-xs-12">email</div>
                        <div class="col-xs-12">ToName</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-2">
                    <div class="row">
                        <div class="col-xs-12">Date: </div>
                        <div class="col-xs-12">Cc: </div>
                        <div class="col-xs-12">Bcc: </div>
                    </div>
                </div>
                <div class="col-xs-10">
                    <div class="row">
                        <div class="col-xs-12">date</div>
                        <div class="col-xs-12">Cc address</div>
                        <div class="col-xs-12">Bcc address</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<div>

Bootply Example

Answer 1

Columns overlap because the col-xs-2 is too small for the content in it:

<div class="col-xs-2">
    <div class="row">
        <div class="col-xs-12">From: </div>
        <div class="col-xs-12">&nbsp;</div>
        <div class="col-xs-12">To: </div>
    </div>
</div>

Inspect with Dev tools the <div class="col-xs-2"> which contains From: to see that when the text overlaps the content area is smaller than the text length.

To solve it you can change the col-xs-NUMBER for a bigger NUMBER (try with 4) also changing the detailed column (to 8, if you replace the previous with 4).