Как правильно дать колонке на большом экране полную ширину?

Question

[Nikita Shchypylov]

Всем привет
Есть такая структура :

<div class="row">
  <div class="item-1"></div>
  <div class="item-2 ml-xl-auto"></div>
</div>

Я хочу сделать так, чтобы .item-2 был по правой стороне до 1200, а потом получил 100% и спрыгнул под .item-1. Как это можно реализовать на Bootstrap? Мы используем Bootstrap 4

Answer 1

[Максим Тимофеев]

https://getbootstrap.com/docs/4.0/layout/grid/

<div class="row">
  <div class="col-lg-6">я половинка</div>
  <div class="col-lg-6 col-md-12">я половинка на больших и на всю ширину на меньших</div>
</div>

Comments

[Nikita Shchypylov]

Не сработает, будет много свободного места для .item-2

[Максим Тимофеев]

Nikita Shchypylov: Сработает:
https://codepen.io/wokster/pen/eEjJyK
а вот что значит

много свободного места

мне не понятно. так что видимо Вы задачу не верно объяснили если результат не устраивает. Сделайте две картинки, надо так и потом так. Что бы было понятно, что Вам надо

[Nikita Shchypylov]

На вашем же примере разберемся. Вот тут много места при таком раскладе.
Мне же нужно так :

[Максим Тимофеев]

Nikita Shchypylov: и в чем проблема?
https://codepen.io/wokster/pen/eEjJyK

[Nikita Shchypylov]

Максим Тимофеев: Ну и что это такое? Где бутстрап?

[Максим Тимофеев]

Nikita Shchypylov: хз, видимо ссылку кинул не туда или перезаписал, что там было. Это ответ на другой вопрос. Сорри. Видимо, то что Вам сделал не восстановить

[Mesuti]

Nikita Shchypylov: Чо касается картинки.
Сделать эти 2 блока нужного размера.
И задать float

<div class="row">
  <div class="col-lg-3 float:left">я левый блок</div>
  <div class="col-lg-3 float:right">я правый блок</div>
</div>

[Mesuti]

Mesuti: Что касается изменения при размере экрана, выбрать нужный float

<div class="float-sm-left">На мелких разрешениях</div><br>
<div class="float-md-left">На обычных разрешениях</div><br>
<div class="float-lg-left">На больших разрешениях</div><br>
<div class="float-xl-left">На очень больших господи понапокупают же разрешениях</div>