Bootstrap grid with something like colspan

Question

How do I create this layout with Twitter Bootstrap...

So that it stacks like this ...

I could do the layout as a table (currently it's an image map, but that was a quick and dirty short term solution), but as I understand bootstrap, the table wouldn't know how to stack the cells. I've seen a number of Bootstrap demos that give "rowspan" like functionality, but in this case I need a "colspan" like function. Can Bootstrap do this?

Answer 1

Assuming you want to use Bootstrap 3.1.1 something like this should work. You might have to add some tweaks but it should solve your problem. Basically you put your subheaders and your content blocks together in one column each, so that the stick together on smaller screens.

<div class="container">
    <div class="row">
        <div class="col-xs-2">
            3
        </div>
        <div class="col-xs-10">
            <div class="row">
                <div class="col-sm-12">
                    Research complete
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <div>Protocol and data</div>
                    <div>
                        <ul>
                            <li>...</li>
                            <li>...</li>
                            <li>...</li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div>Study specific</div>
                    <div>
                        <ul>
                            <li>...</li>
                            <li>...</li>
                            <li>...</li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div>Ethics/governance and regulatory</div>
                    <div>
                        <ul>
                            <li>...</li>
                            <li>...</li>
                            <li>...</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JSFiddle