NaN

у вас должна быть карточка товара с бэкграундом, в этой карточке две составляющих - фото и описание.
задаете flex родителю (карточке товара) и эти два блока становятся рядом, зачем здесь вообще использовать бутстрап?

Написать свой класс для переопределения стилей бутстрапа, в котором прописать свойство white-space:normal

Мы делаем для каждого компонента папку с .md файлом в котором описание и примеры

бутстраповские стили (то есть классы) лучше оставить как они есть на самом деле, иначе потом можно запутаться или забыть или другой челоек будет работать над проектом, а вы скорее всего экстендите их в свои классы просто, это неочевидно и может вызвать проблемы. Ничего страшного в том что у вас будут стили бутстрапа не по бем, а ваши по бем.

Если вам нужно как то кастомизировать стили бустраповских классов просто допишите в добавок к нему свой класс и переопределите стили для него

camelCase в стилях странно видеть, лучше замнить на дефис, это плохая практика, так как можно спутать с id для js, то есть плохо читаем код

не встречалось такое и как воообще это должно работать? откуда phpstorm должен знать что вы хотите написать, это же не как в js например какие-то кастомные методы

Material Icons Extended? https://materialdesignicons.com/

<div class="row">
      <div class="col-9">
             <div class="row">
                    <div class="col-8"></div>
                    <div class="col-4"></div>
             </div>
             <div class="row">
                    <div class="col-4"></div>
                    <div class="col-8"></div>
             </div>
      </div>
      <div class="col-3"></div>
</div>

да вроде как нормально все работает в mac os sierra в safari 12.0.2

напишите свои классы-модификаторы и поиграйте со стилями. там же с помощью флексов сделано, измените flex-direction. ну и остально.

а вообще если можете что-то сделать сами - делайте. это не очень сложная компонента.

Допустим есть какой-то родительский блок.
В него надо поместить два дочерних блока (пусть даже с помощью бутстрапа).
В левой колонке создать другой родительский блок с 3 дочерними.

А вообще вы уверены что это нужно делать колонками бутстрапа?
Возможно нужно создать блок с инлайн элементами и с помощью overflow скрывать тот блок. Ну или что-то вроде того

У вас 3 блока, так оберните их родительский блок и задайте ему display:flex и align-items: space-between;

Скорее всего вместо style.less -> bootstrap.less, т.к в него импортится variables.less и другие файлы

очень плохо.
это вообще что?
почему в ссылке какие-то колонки?
span в span конечно можно сделать, но не стоит

Сделайте дивами колонки три, поместите в него три ссылки с каким-то текстом, в чем проблема то?

Вообще странное решение, лучше пересмотреть верстку этого блока в целом.

а в чем смысл?
полностью отказаться от препроцессоров все равно не получится, так так в настоящее время там больше возможностей. (миксины, функции и т.д). Пока все это не появится в чистом css не вижу смысла использовать.

Можно пример, где bootstrap использует css переменные? потому что мне кажется он использует возможности sass

Вы уверены что у вас выстроена верная структура? Может стоит пересмотреть и тогда будет легко понять, как сделать то, что нужно.

kenwheeler.github.io/slick

Примерно так
Логотип оставляете в левой части.
Оставшееся помещаете в общий див и выравниваете справа, задав соответствующий класс.
Каждому элементу делаете враппер, которому задаете отступ слева, кроме последнего элемента.
Для именование классов используйте БЭМ, будет более понятно что к чему относится

Ну родителю position:relative.
Скроллу absolute.
И выравниваем как надо.
Что тут еще то?
Конкретики нет.