3

i am using bootstrap 4 grid. i have 3 columns. i want first and third column to be col-8 and second column to be col-4. basically second column is a sidebar which i want to fall between first and third column on small screens. unfortunately my second column has dynamic height and is very long so the first column gets assigned height of second column leaving the third column start from the bottom of second column with lots of space between first and third. i would like column 3 to fall right under the text of first column.

i hope that makes sense.

This is the image of what I'm trying to do:

enter image description here

<div class="container">
    <div class="row ">
      <div class="col-sm-8 ">
        <div>One of three columns</div>
        <div>One of three columns</div>
      </div>
      <div class="col-sm-4 ">
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
      </div>
      <div class="col-sm-8">
        <div>three of three columns</div>
        <div>three of three columns</div>
        <div>three of three columns</div>
      </div>
    </div>
  </div>
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
adam
  • 43
  • 2
  • 7

4 Answers4

3

Bootstrap 5 (update 2021)

Bootstrap 5 also uses flexbox for grid rows/columns. Therefore using d-block responsively will still work, however float-left has been replaced with float-start.

Bootstrap 4 (original answer)

Basically this has already been answered before.

Bootstrap 4 is flexbox, and therefore all of the columns become the same height as the tallest column. Usually, you can workaround this by nesting the columns, but then you won't get the desired column order. The workaround is to use floats like this:

<div class="container">
    <div class="row d-sm-block">
      <div class="col-sm-8 float-left">
        <div>One of three columns</div>
        <div>One of three columns</div>
      </div>
      <div class="col-sm-4 float-right">
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
        <div>Two of three columns</div>
      </div>
      <div class="col-sm-8 float-left">
        <div>three of three columns</div>
        <div>three of three columns</div>
        <div>three of three columns</div>
      </div>
    </div>
</div>

Demo: https://codeply.com/go/0bUA8clMdI (borders added for visualization)

This works using the d-sm-block in the row to make the row display:block instead of display:flex on sm and up. This allows the float-* to work on the columns and 2nd column gets pulled to the right.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
2

If you don't mind copying your sidebar, you can put the sidebar copy between column 1 and 3 and show it on small screens while hiding another one on the right. On large screens you can do the opposite to show the sidebar on the right while hiding the copy between column 1 and 3.

HTML

<div class="container">
  <div class="row">
    <div class="col-sm-8">
        <section class="mb-3">
            column 1
        </section>
        <section class="mb-3 d-sm-none">
            copy of column 2
        </section>
        <section class="mb-3">
            column 3
        </section>
    </div>
    <div class="col-sm-4">
        <section class="mb-3 d-none d-sm-block">
            column 2
        </section>
    </div>
  </div>
</div>

Result

On small screens:

enter image description here

On larger screens:

enter image description here

fiddle: http://jsfiddle.net/aq9Laaew/243819/

David Liang
  • 20,385
  • 6
  • 44
  • 70
1

You can write row column inside column

try this

<div class="container border border-primary">
<div class="row border border-primary">
    <div class="border border-primary col-lg-8 col-md-12 col-sm-12" style="height:200px">
        <div class="row border border-secondary">
            <div class="border border-secondary col-lg-12 col-md-12 col-sm-12" style="height:100px">
                <!--content for 1-->
            </div>
            <div class="border border-secondary col-lg-12 col-md-12 col-sm-12" style="height:100px">
                <!--content for 2-->
            </div>
        </div>
    </div>
    <div class="border border-primary col-lg-4 col-md-6 col-sm-6" style="height:200px">
        <!-content for 3-->
    </div>
</div>
vidy
  • 1,572
  • 6
  • 24
  • 43
0

only way i could accomplish this is by removing row class and adding floats per example below

<div class="container">
            <div class=" ">
                <div class="col-md-8 grey  float-left">
                            <div>main content</div>
                            <div>main content</div>
                        </div>
                    </div>
                    <div class="col-md-4  blue float-right ">
                                <div>side content</div>
                                <div>side content</div>
                                <div>side content</div>
                                <div>side content</div>
                                <div>side content</div>
                        </div>

                    <div class="col-md-8 pink float-left">
                            <div>main2 content</div>
                            <div>main2 content</div>
                            <div>main2 content</div>
                    </div>
            </div>
        </div>
adam
  • 43
  • 2
  • 7