адаптировать под разрешение нужно с тем же кол-вом колонок
<div class="views-content">
<div class="views-row odd">
<div class="text-field">текст</div>
<div class="image-field">картинка</div>
</div>
<div class="views-row even">
<div class="text-field">текст</div>
<div class="image-field">картинка</div>
</div>
</div>display:flex;, элементы выстроятся друг за другом, подобно ячейкам таблицы. В отличие от табличной верстки, flexbox гораздо гибче и позволяет дополнительные манипуляции (см., например, https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ). <meta name="viewport" content="width=device-width, initial-scale=1.0">@media screen and (max-width: 576px) {
...
}
/*css код внутри этих фигурных скобок применится только для ширины окна 576px и меньше*/
/*есть смысл создать несколько таких правил для разных разрешений*/
Бутстрап — это инструмент разработчика, один из существующих.
Будет он верстать на bootstrap, на foundation или на собственном фреймворке — решать ему.
Дизайнера (если он сам не верстает), это вообще никаким боком не касается.
Или нужно в ТЗ прописывать максимально четкие требования. Например, дизайн элементов форм максимально близкий к типовым бутстраповским (как здесь: https://getbootstrap.com/docs/4.1/examples/checkout/).
А так, бутстрап ничем не ограничивает творчество. Посмотрите примеры сайтов — https://themes.getbootstrap.com — они все разные!