Всем привет,
На странице
http://ec2-34-212-140-26.us-west-2.compute...tmp_csvp/edit/1

Я делал bootstrap-верстку в 2 колонки и чтобы на маленьких устройствах верстка становилась в 1 колонку:
Первая строка упрощенный пример :

<div class="row form-group"  style="background-color: yellow">
   <div class=" col-xs-12 col-sm-12 col-md-6  " style="background-color: green">
      Left
   </div>
   <div class=" col-xs-12 col-sm-12 col-md-6 pull-right"  style="background-color: blue">
      Right
   </div>
</div>

И чтобы “Left” оказалась сверху “Right”
но этого не произошло...

Как это исправить?


Спасибо!

У меня на маленьком устройстве выглядит так

https://imgur.com/a/jIrUr
У вас также ?

Хотя “Left” должно быть сверху “Right”
Ведь так ?

mstdmstd

Это вы показали не маленькое устройство. Почитайте пожалуйста внимательно документацию по grid bootstrap.

Не знаю что вы хотите получить, могу только догадываться.

col-xs-12 col-sm-12 col-md-12 col-lg-6

Дак вроде так :

mstdmstd при 767px будет, если вы хотите это изменить можно это дело поменять в less или sass. Ну или в самом файле css

mstdmstd
Все правильно срабатывает, только один недочет, внимательно смотрим описание на бутстрапе, прилагаю скрины...


обратить внимание на знаки ( < и >= ) красным обведено и на первом фото видно, что размер на единицу изменен и правило - срабатывает.

Thanks!
Еще подскажите пожалуйста а как убрать отступ справа где сдвоенные колонки (Is applied ) на широких устройствах ?

Блин, у тебя там грубо говоря все переделывать нужно, подвал растянут, из за этого скроллбар появляется, тем самым увеличивает ширину страницы - нужно исправлять...

margin-left: -15px;
margin-right: -15px;

это напихано где только можно - зачем?... - нужно исправлять, просмотри еще раз описание css бутстрапа и делай как там пишут, а не придумывай связки от себя )).
Отсупы колонок(пропуски "col-sm-offset-1" и т.д.) указываются внутри row, но никак не в самом row, т.е. :

<div class="row   col-sm-offset-1 col-md-offset-2">
    <div class="col-sm-12 col-md-6">
    ...
    </div>
</div>

не правильно...

<div class="row ">
    <div class="col-sm-offset-1 col-md-offset-2 col-sm-12 col-md-6">
    ...
    </div>
</div>

правильно...
Это только несколько ошибок при беглом осмотре, как только избавишься от ( margin-left: -15px; margin-right: -15px; ), все выровняется, в броузере есть же удобная консоль, пробуй в ней и смотри как меняется что.

Спасибо за коментарии:
Эти величины
margin-left: -15px;
margin-right: -15px;
я не придумывал - они шли в изначально в бутстрапе 4 Сам не очень понимаю зачем они нужны...
Я повыставлял их в 0 где только нашел...

Не уверен что стало лучше... Сейчас на моем Cromium на крупных девайсах есть шифт по ширине как-будто что-то распирает в сторону...
Не подскажите что?

И проблема с  отступом справа где сдвоенные колонки осталась...

Я обновил на сервере...

В файле app.css строка 3929
удалить
.form-horizontal .form-group {
    margin-left: -15px;
    margin-right: -15px;
}

В файле app.css строка 8652
исправить что бы было так
.form-group {
    padding: 10px 0px;
    margin: 0;
}

В файле app.css строка 2062
удалить
.row {
    margin-left: -15px;
    margin-right: -15px;
}

В файле app.css строка 3945
исправить что бы было так

в разделе @media (min-width: 768px)

поправить параметры для:
.form-horizontal .control-label {
    text-align: right;
    margin: 0 auto;
    line-height: 35px;
    padding: 0;
}

В файле app.css строка 8729
удалить
.select_input, .select_input:focus {
    height: 36px !important;
    padding: 0;
    margin: 5px;
}

Исправить ошибки, потому что не все догружается или "не до очищенный код":