начальная загрузка 4 сетки неровных столбцов

Question

Я использую сетку начальной загрузки 4.у меня есть 3 столбца.я хочу, чтобы первый и третий столбец были col-8, а второй столбец - col-4.в основном, второй столбец - это боковая панель, которую я хочу поместить между первым и третьим столбцом на маленьких экранах.к сожалению, мой второй столбец имеет динамическую высоту и очень длинный, поэтому первый столбец получает заданную высоту второго столбца, оставляя третий столбец начинающимся снизу второго столбца с большим количеством пробелов между первым и третьим.Я бы хотел, чтобы столбец 3 попал прямо под текст первого столбца.

Надеюсь, это имеет смысл.

Это изображение того, что я пытаюсь сделать:

<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

Вы можете написать столбец строки внутри столбца

попробуйте это

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

Answer 2

Если вы не против скопировать свою боковую панель, вы можете поместить копию боковой панели между столбцами 1 и 3 и показать ее на маленьких экранах, одновременно скрывая другую справа.На больших экранах вы можете сделать противоположное, чтобы показать боковую панель справа, скрывая копию между столбцами 1 и 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>

Результат

На маленькомэкраны:

На больших экранах:

скрипка: http://jsfiddle.net/aq9Laaew/243819/

Answer 3

В основном на это уже был дан ответ до .

Bootstrap 4 - это flexbox, и поэтому все столбцы становятся такой же высоты, как и самый высокий столбец.Обычно вы можете обойти это, вложив столбцы, но тогда вы не получите желаемый порядок столбцов.Временное решение: использовать поплавки следующим образом:

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

Демонстрация: https://www.codeply.com/go/0bUA8clMdI (границы добавлены для визуализации)

Это работает с использованием d-sm-block в rowсделать строку display:block вместо display:flex на sm и выше.Это позволяет float-* работать со столбцами, а второй столбец перемещается вправо.

Answer 4

Единственный способ, которым я мог бы сделать это, удалив класс строки и добавив число с плавающей запятой для каждого примера ниже

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