How can i use bootstrap to make a column that spans over other rows beneath it?

Question

I have a website with a 3 column layout, and I want my middle column to have a different height than the side columns, then I have a second row of 2 columns that I have col-pull-left and col-push-right which I want to appear next to the large middle column, however I always get that second row UNDERNEATH my large middle column. I am trying to figure out how to do this using bootstrap. Any suggestions?

I tried floating the middle column, and floating the entire row, i can't seem to get it to work because the second row always clears the first row, so it clears the entire center column as well.

I hope I made myself clear. Basically my code looks like this, (im removing the php for wp)

<div class="row">
        <div id="contentWrap1" class="col-sm-3">
            <h3>Acerca de CIPM</h3>
            <hr>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce     eget neque gravida, faucibus lacus vel.</p>
        </div>
        <div id="contentWrap2" class="col-sm-4 col-sm-offset-1">
            //content
            //ths is the column that I want to be longer than the others because it contains many posts
        </div>
        <div id="contentWrap3" class="col-sm-3 col-sm-offset-1">
            <h3>C&oacute;digo de Etica</h3>
            <hr>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget neque gravida, faucibus lacus vel.</p>
        </div>
    </div>
    //now this is the second row that is displaying beneath the first one, however high the center column is, but i would like it to display up next to the center column, with the next #contentWraps on either side. Almost as if te content had 2 sidebars on each side, except i split them up this way for the responsive layout
    <div class="row">
        <div id="contentWrap4" class="col-sm-3 pull-left" style="float:left; clear: none;">
            <h3>Quicklinks</h3>
            <hr>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget neque gravida, faucibus lacus vel.</p>
        </div>
        <div id="contentWrap5" class="col-sm-3 pull-right">
            <h3>External Newsfeed</h3>
            <hr>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget neque gravida, faucibus lacus vel.</p>
        </div>
    </div>

As in, you want the 2 columns below to be the same width as the middle column above? — Jay, Jul 08 '15 at 14:11
Can you post an image of the desired layout. Your description is a bit confusing. — hungerstar, Jul 08 '15 at 14:14
@hungerstar http://i.imgur.com/cqsnYe6.png this is what he wants — TylerH, Jul 08 '15 at 14:16
@TylerH that is exactly what i want, did you create that image? and thanks for the link of the possible duplicate! appreciate it! — xunux, Jul 08 '15 at 16:01

score 0 · Accepted Answer · answered Jul 08 '15 at 15:10

0

Instead of treating this layout as two rows, do one row with three columns and each column has it's own top & bottom sections.

<div class="row">
    <div id="left-col" class="col-sm-4">
        <div id="top-left"></div>
        <div id="bottom-left"></div>
    </div>
    <div id="middle-col" class="col-sm-4">
        <div></div>
    </div>
    <div id="right-col" class="col-sm-4">
        <div id="top-right"></div>
        <div id="bottom-right"></div>
    </div>
</div>

answered Jul 08 '15 at 15:10

Malissa

86
1
4

I had already thought of that, but the problem with doing that is that when it responds to mobile devices, then each column will stack on top of each other and that's not the layout i want on mobile devices! unless there is a way to change the layout and order of the markup for the mobile query! – xunux Jul 08 '15 at 15:58

How can i use bootstrap to make a column that spans over other rows beneath it?

1 Answers1