Полагаю, у меня все работает так, как вы хотите, проверьте jsfiddle:
https://jsfiddle.net/o6uf9hq4/
<footer class="footer__wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-6">
<h5 class="footer__contact-us-header footer__text--underline">
CONTACT OUR <br>
EXCLUSIVE AGENTS AT
</h5>
<div class="footer__line footer__line--pl10"></div>
<h3 class="footer__contact-us-number">646-846-0954</h3>
</div>
<div class="footer__name-wrapper col-sm-6 col-md-2">
<h3 class="footer__name footer__text--underline">BRAD COHEN</h3>
<div class="footer__line"></div>
<p class="footer__name-title">
Senior Director<br>
<a href="mailto:bc@ecretail.com" class="footer__name-link">
bc@ecretail.com
</a>
</p>
</div>
<div class="footer__name-wrapper col-sm-6 col-md-2">
<h3 class="footer__name footer__text--underline">JACOB TZFANYA</h3>
<div class="footer__line"></div>
<p class="footer__name-title">Senior Director<br>
<a href="mailto:jt@ecretail.com" class="footer__name-link">
jt@ecretail.com
</a>
</p>
</div>
<div class="footer__name-wrapper col-sm-6 col-md-2">
<h3 class="footer__name footer__text--underline">JON KAMALI</h3>
<div class="footer__line"></div>
<p class="footer__name-title">Director<br>
<a href="mailto:jk@ecretail.com" class="footer__name-link">
jk@ecretail.com
</a>
</p>
</div>
</div>
<div class="row justify-content-end">
<div class="col-sm-6 col-md-3">
<div class="footer__sponsor-logo-wrapper">
<img class="footer__sponsor-logo" src="img/terreno-logo.png" alt="#">
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="footer__address-wrapper">
<img src="img/ec-logo-footer.svg" alt="" class="footer__logo">
<p class="footer__ec-contact">
355 Lexington Avenue,<br>
New York, NY 10017<br>
easternconsolidated.com<br>
T: 212.499.7700; <br>
F: 212.499.7718
</p>
</div>
</div>
</div>
</div>
</footer>
<html>
Вот некоторые рекомендации по использованию системы сетки, извлеченные из документации Bootstrap :
- Контейнеры предоставляют средства для центрирования и горизонтального добавления содержимого вашего сайта. Используйте
.container для чувствительной ширины пикселя или .container-fluid для ширины: 100% для всех размеров области просмотра и устройства.
- Ряды являются обертками для столбцов. Каждый столбец имеет горизонтальное заполнение (называемое желобом) для управления пространством между ними. Этому отступу затем противодействуют строки с отрицательными полями. Таким образом, все содержимое ваших столбцов визуально выравнивается по левой стороне.
- В макете сетки содержимое должно быть размещено в столбцах, и только столбцы могут быть непосредственными потомками строк.
- Благодаря flexbox столбцы сетки без указанной ширины будут автоматически размещаться как столбцы равной ширины. Например, четыре экземпляра .col-sm будут автоматически иметь ширину 25% от маленькой точки останова и выше. См. Раздел колонок с автоматической разметкой для получения дополнительных примеров.
- Классы столбцов показывают количество столбцов, которое вы хотели бы использовать из возможных 12 в строке. Итак, если вам нужно три столбца одинаковой ширины, вы можете использовать .col-4.
- Ширина столбцов задается в процентах, поэтому они всегда текучие и имеют размер относительно родительского элемента.
- Столбцы имеют горизонтальные отступы для создания желобов между отдельными столбцами, однако вы можете удалить поля из строк и отступы для столбцов с .no-gutters на .row.
- Чтобы сделать сетку отзывчивой, существует пять точек останова сетки, по одной на каждую отзывчивую точку останова: все точки останова (очень маленькие), маленькие, средние, большие и очень большие.
- Точки останова сетки основаны на медиазапросах минимальной ширины, то есть они применяются к этой одной точке останова и ко всем вышеупомянутым точкам (например, .col-sm-4 применяется к устройствам малого, среднего, большого и очень большого размера, но не к первая точка останова xs)
- Вы можете использовать предопределенные классы сетки (например, .col-4) или миксины Sass для большей семантической разметки.