Twitter Bootstrap 3 column ordering

Question

I am having trouble with rows and columns in Twitter Bootstrap 3. I got 5 images, which are set in 2 rows (3 in 1st row and 2 in 2nd one). They are set as col-lg-4 (3 images in a row).

<div class="row pad3">

            <div class="col-lg-4 desctext">

                  <a href="#">

                      <img class="imgmargin" src="css/img/logodtll.png" alt="" />

                  </a>

            </div>

            <div class="col-lg-4 desctext">

                  <a href="#">

                      <img class="imgmargin" src="css/img/sclogonew.png" alt="" />

                  </a>

            </div>

            <div class="col-lg-4 desctext">

                  <a href="#">

                      <img class="imgmargin" src="css/img/biclogonew.png" alt="" />

                  </a>

            </div>

        </div>

        <div class="row pad3">

            <div class="col-lg-4 col-xs-12 desctext">

                  <a href="#">

                      <img class="imgmargin" src="css/img/adrislogo2.png" alt="" />

                  </a>

            </div>

            <div class="col-lg-4 col-xs-12 desctext">

                  <a href="#demo">

                    <img class="imgmargin" src="css/img/collection2.png" alt="" /> 

                  </a>

            </div>

        </div>

I want to achieve that when I reduce my window size, those columns become medium (col-md-6) and the 3rd one "spills" over into the next row. Kinda like on large screen its 3 and 2, on medium its 2-2-1. How do I achieve this? I dont know what to do with my 3rd column because he is still part of the 1st row. Is this done with media queries?

In short, when screen is large i want to have 3 images in a row, when its medium i want to have 2 images in a row and anything less than that its 1 image per row.

Thanks

Carol Skelly · Answer 1 · 2018-04-08T13:28:49.480

The dividing row is preventing the columns from wrapping ("spillover"). Try this..

<div class="row pad3">
    <div class="col-lg-4 col-md-6 desctext">
        <a href="#">
            <img class="imgmargin" src="css/img/logodtll.png" alt="">
        </a>
    </div>
    <div class="col-lg-4 col-md-6 desctext">
        <a href="#">
            <img class="imgmargin" src="css/img/sclogonew.png" alt="">
        </a>
    </div>
    <div class="col-lg-4 col-md-6 desctext">
        <a href="#">
            <img class="imgmargin" src="css/img/biclogonew.png" alt="">
        </a>
    </div>
    <div class="col-lg-4 col-md-6 desctext">
        <a href="#">
            <img class="imgmargin" src="css/img/adrislogo2.png" alt="">
        </a>
    </div>
    <div class="col-lg-4 col-md-6 desctext">
        <a href="#demo">
            <img class="imgmargin" src="css/img/collection2.png" alt="">
        </a>
    </div>
</div>

Demo: http://bootply.com/93649

Also see: Bootstrap 3 - Use more than 12 columns in a row

Thanks alot Skelly! It works nice. Is it allowed (good) to have so many collumns in a row? This makes one row having 5 col-lg-4 collumns. Is that ok? Otherwise, it works very nice and thanks again for your quick answer! — Klema, Nov 12 '13 at 15:16

Twitter Bootstrap 3 column ordering

1 Answers1