0

I am using bootstrap grid system got a problem. I can't figure out how to stack the three "cells" of col-md-8 and the three "cells" of col-md-4 vertically/above each other in desktop mode.

The columns are all the same size, so it should work.

The current code works exactly as I want in mobile view: http://snag.gy/obRKH.jpg

But in desktop view it looks all wrong. See picture, red = unwanted "space". Blue arrows is where I want to move the columns: http://snag.gy/voo7V.jpg

JSfiddle: http://jsfiddle.net/vdexv26g/

Sample code

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <h1>Lorem</h1>
            <p>Consectetur adipiscing elit. Ut quam lacus, fermentum vitae eros id, semper rutrum nibh. Vestibulum elementum leo vel eros hendrerit rutrum. Fusce aliquam fringilla leo, sit amet ullamcorper nisi sagittis vitae. Sed ut accumsan risus. Fusce eu ex ullamcorper, cursus ipsum vitae, hendrerit justo.</p>
        </div>
        <div class="col-md-4">
            <h3>Sollicitudin</h3>
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                <li>Maecenas elementum lectus et risus sollicitudin, ut ultricies enim placerat.</li>
                <li>Quisque sed odio eget libero cursus auctor.</li>
            </ul>

            <ul>
                <li>Sed semper justo in nunc pellentesque dictum.</li>
                <li>Pellentesque hendrerit orci ut lectus suscipit elementum.</li>
                <li>In a massa vel urna pellentesque congue at in dui.</li>
            </ul>
        </div>

        <div class="col-md-8">
            <h2>Lorem ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum porta mollis. Integer vitae massa vitae nisl mattis venenatis ut a velit. Nulla eget purus nulla. Donec ac velit tellus. Sed molestie porttitor justo ut efficitur. Nam ac sagittis nibh, vitae malesuada tellus. Sed sodales erat purus, ac aliquet elit.</p> <p>Justo, eu convallis dui dui et nulla. Cras quis vulputate ante.</p> <p>Vestibulum fringilla tortor vitae nisl rutrum, nec luctus nunc imperdiet. Fusce congue bibendum tempus. Etiam vitae mattis enim.</p>
        </div>
        <div class="col-md-4">
            <h3>Pellentesque</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper fringilla ipsum, non posuere elit.</p>
        </div>

        <div class="col-md-8">
            <h2>Donec efficitur</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet lorem sit amet eros faucibus maximus ut id dolor. Sed luctus vulputate lacinia. Proin venenatis massa odio, eu pretium nunc venenatis sed. Nullam et sem tortor. Donec efficitur euismod ligula a gravida. Donec eu nulla quis elit bibendum malesuada.</p> <p>Duis turpis orci, posuere ut magna non, sollicitudin iaculis arcu. Proin interdum, nunc et semper efficitur, est turpis volutpat justo, eu convallis dui dui et nulla. Cras quis vulputate ante.</p> <p>Vestibulum fringilla tortor vitae nisl rutrum, nec luctus nunc imperdiet. Fusce congue bibendum tempus. Etiam vitae mattis enim. Vestibulum turpis metus, imperdiet sed sagittis eget, porta et ipsum. Aenean consectetur augue id arcu scelerisque, viverra volutpat justo auctor. Maecenas malesuada nisi vitae augue ornare lacinia. Quisque vel massa felis. Morbi vehicula augue scelerisque dignissim dictum. Proin mattis leo laoreet dui molestie tempor. Pellentesque a elit id augue sagittis blandit sed sit amet dolor. Suspendisse tellus nunc, aliquam at ante molestie, pulvinar iaculis sem. Suspendisse quis porttitor massa. Cras pharetra luctus nisl.</p>
        </div>
        <div class="col-md-4">
            <h3>Fusce</h3>
            <img src="http://www.w3schools.com/html/pic_mountain.jpg">
            <img src="http://www.w3schools.com/html/pic_mountain.jpg">
            <img src="http://www.w3schools.com/html/pic_mountain.jpg">
            <img src="http://www.w3schools.com/html/pic_mountain.jpg">
            <img src="http://www.w3schools.com/html/pic_mountain.jpg">
            <img src="http://www.w3schools.com/html/pic_mountain.jpg">
            <img src="http://www.w3schools.com/html/pic_mountain.jpg">
        </div>

        <div class="col-md-8">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce.</p>
        </div>
    </div>
</div>

Edit:

I might have solved it myself - see updated JSfiddle: http://jsfiddle.net/vdexv26g/2/

Is this a correct way doing this?

Siguza
  • 21,155
  • 6
  • 52
  • 89
Liu Kang
  • 1,359
  • 4
  • 22
  • 45

3 Answers3

2

You did achieve what you wanted but you had to add css rules like float right etc. These rules changes might break you site instead the right way to go about this is use bootstrap's styles itself. Check the code below:

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="row">
                <p>Consectetur adipiscing elit. Ut quam lacus, fermentum vitae eros id, semper rutrum nibh. Vestibulum elementum leo vel eros hendrerit rutrum. Fusce aliquam fringilla leo, sit amet ullamcorper nisi sagittis vitae. Sed ut accumsan risus. Fusce eu ex ullamcorper, cursus ipsum vitae, hendrerit justo.</p>
            </div>
            <div class="row">
                 <h2>Lorem ipsum</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas interdum porta mollis. Integer vitae massa vitae nisl mattis venenatis ut a velit. Nulla eget purus nulla. Donec ac velit tellus. Sed molestie porttitor justo ut efficitur. Nam ac sagittis nibh, vitae malesuada tellus. Sed sodales erat purus, ac aliquet elit.</p>
                <p>Justo, eu convallis dui dui et nulla. Cras quis vulputate ante.</p>
                <p>Vestibulum fringilla tortor vitae nisl rutrum, nec luctus nunc imperdiet. Fusce congue bibendum tempus. Etiam vitae mattis enim.</p>
            </div>
            <div class="row">

<h2>Donec efficitur</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet lorem sit amet eros faucibus maximus ut id dolor. Sed luctus vulputate lacinia. Proin venenatis massa odio, eu pretium nunc venenatis sed. Nullam et sem tortor. Donec efficitur euismod ligula a gravida. Donec eu nulla quis elit bibendum malesuada.</p>
                <p>Duis turpis orci, posuere ut magna non, sollicitudin iaculis arcu. Proin interdum, nunc et semper efficitur, est turpis volutpat justo, eu convallis dui dui et nulla. Cras quis vulputate ante.</p>
                <p>Vestibulum fringilla tortor vitae nisl rutrum, nec luctus nunc imperdiet. Fusce congue bibendum tempus. Etiam vitae mattis enim. Vestibulum turpis metus, imperdiet sed sagittis eget, porta et ipsum. Aenean consectetur augue id arcu scelerisque, viverra volutpat justo auctor. Maecenas malesuada nisi vitae augue ornare lacinia. Quisque vel massa felis. Morbi vehicula augue scelerisque dignissim dictum. Proin mattis leo laoreet dui molestie tempor. Pellentesque a elit id augue sagittis blandit sed sit amet dolor. Suspendisse tellus nunc, aliquam at ante molestie, pulvinar iaculis sem. Suspendisse quis porttitor massa. Cras pharetra luctus nisl.</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="row">
                 <h3>Sollicitudin</h3>

                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                    <li>Maecenas elementum lectus et risus sollicitudin, ut ultricies enim placerat.</li>
                    <li>Quisque sed odio eget libero cursus auctor.</li>
                </ul>
                <ul>
                    <li>Sed semper justo in nunc pellentesque dictum.</li>
                    <li>Pellentesque hendrerit orci ut lectus suscipit elementum.</li>
                    <li>In a massa vel urna pellentesque congue at in dui.</li>
                </ul>
            </div>
            <div class="row">
                 <h3>Pellentesque</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper fringilla ipsum, non posuere elit.</p>
            </div>
            <div class="row">
                 <h3>Fusce</h3>

                <img src="http://www.w3schools.com/html/pic_mountain.jpg" />
                <img src="http://www.w3schools.com/html/pic_mountain.jpg" />
                <img src="http://www.w3schools.com/html/pic_mountain.jpg" />
                <img src="http://www.w3schools.com/html/pic_mountain.jpg" />
                <img src="http://www.w3schools.com/html/pic_mountain.jpg" />
                <img src="http://www.w3schools.com/html/pic_mountain.jpg" />
                <img src="http://www.w3schools.com/html/pic_mountain.jpg" />
            </div>
        </div>
    </div>

Divide the row into two columns and then add rows to those columns. You can break it into more columns etc. Here is a working fiddle

Just add the borders for the rows, if you want a separator/line between content. Here is the fiddle with borders for the content

Polynomial Proton
  • 5,020
  • 20
  • 37
  • I understand what you say about css breaking the site. Thanks for your answer. But, my fiddle (updated with numbers): http://jsfiddle.net/vdexv26g/7/ and your fiddle (updated with numbers): http://jsfiddle.net/vdexv26g/6/ are behaving a bit differently in "phone mode". My desire is to get the ordered number of 1,2,3,4,5,6 in this mode, just as my solution does. Is there a way of doing this without css? – Liu Kang Apr 16 '15 at 05:43
  • @LiuKang Since, this is a custom requirement, you have to use CSS because bootstrap rows always show in order. [You might want to check this](http://stackoverflow.com/questions/19244268/bootstrap-fluid-grid-system-with-different-height) – Polynomial Proton Apr 16 '15 at 05:55
0

First off, the way that the bootstrap grid system works is that when you define something to be col-md-#, then it will not collapse to be vertical until your window is smaller than md. Try changing the size of your web browser and you'll notice that they do indeed stack vertically.

Now, to answer your question. If you want to stack columns vertically, the simplest way will probably be to put each set of columns in its own row. Row stack on top of each vertically, which is what you are looking for.

<div class="row>
...your col(s) here
</div>
Daniel Jamrozik
  • 1,228
  • 2
  • 11
  • 25
0

Solved it with:

@media (min-width: 992px) {
    .col-md-4 {
        float: right;
    }
}

Fiddle: http://jsfiddle.net/vdexv26g/2/

Liu Kang
  • 1,359
  • 4
  • 22
  • 45