bootstrap grid uneven columns

Question

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:

<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>

Answer 1

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.

Answer 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:

On larger screens:

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