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

Зачем flex?
htmlbook.ru/css3-na-primerah/mnogokolonochnyy-tekst

Добавить ему
display: inline;

Кто виноват: На мобильных тыблоках версия браузера зависит от OS, поэтому на 5-й стоит старый сафари, который кашляет от flexbox.
Что делать: юзать префиксы или устроить акцию "зайди к нам со старого ios и получи говно на странице"

Верстка делается под старый браузер

насколько старый? Если очень - таблицы

я так понимаю нужен SPA (single page application), тогда берите любой js framework и вперед:
angular
vue
и т.д.
сам вопрос верстки уже зависит от конечной цели и по сути - самая простая часть задачи.

подскажите, что сделать...

смотреть логи. "Ой что-то болит" не лечится. Попробуйте постучать по дереву.

Работать Вам придется с разными. И с кривыми psd и с jpg в качество макета и даже с "хотелками" на салфетке. Так что не перебирайте, берите по очереди, берите разные. Главное больше практики. Работать с идеальным psd, в котором есть сетка, в котором дизайнер предусмотрел что реализуемо, а что нет - мне не приходилось. Всегда куча "нежданчиков", так что не ищите идеала, его нет и не будет.

https://masonry.desandro.com
https://getbootstrap.com/docs/4.0/components/card/...

А что там не стандартного?
https://adminlte.io/themes/AdminLTE/index.html
или https://adminlte.io/premium
- напильником поработать и будет самое то. Но напильник нужен большой, так что берите кучу денег за это или пусть довольствуются готовыми решениями.

При чем тут bootstrap? Какие таблицы? То что на скрине это список, наверное проще такое сделать через

<dl>
  <dt>2016</dt>
   <dd>текст</dd>
  <dt>2017</dt>
   <dd>текст</dd>
</dl>

А если надо именно три таблицы, то не понимаю в чем проблема? Тогда вопрос звучит "надо сделать шаг не пойму как". Это очень странно.

text-align: center;
https://jsfiddle.net/ukqhdx9w/14/

при уменьшении ширины экрана

Ответ тот же, но добавим медиа запрос

@media screen and (max-width:600px) {
  .fghfldf {text-align: center};
}

https://jsfiddle.net/ukqhdx9w/28

В качестве сетки используется Бутстрап

рад за Вас, а зачем нам это знать? И в како месте она используется, что-то не помню что бы у бутстрапа был класс footer-col. Да и раз уж Вы указываете что используете ту или иную технологию, указывайте ее мажорную версию. Ибо boostrap имеет их 4 и они крайне разные.

взять js библиотеку, которая строит графики
получить json данные
построить график
менять заливку используя api выбранной библиотеки

<div class="container">
    <div class="row">
        <div class="col-1">1</div>
        <div class="col-1">2</div>
        <div class="col-1">3</div>
        <div class="col-1">4</div>
        <div class="col-1">5</div>
        <div class="col-1">6</div>
        <div class="col-1">7</div>
        <div class="col-1">8</div>
        <div class="col-1">9</div>
        <div class="col-1">10</div>
        <div class="col-1">11</div>
        <div class="col-1">12</div>
    </div>
</div>

а если короче, то что Вы называете крайними колонками, это отступы контейнера

Браузеры и bootstrap тут точно не при чем. Ищите кривые руки. Вариантов много, вот первое что в голову пришло:
- не указан размер шрифта, а по умолчанию он разный
- в одном из браузеров масштаб изменен

хромобраузеры не понимают свойство max-width

https://caniuse.com/#search=max-width
Другое дело, что согласно спецификации max-width применим только к блочным элементам. display: block; вам в помощь.

svg через defer и потом через use дергать. Оптимально, удобно, стилизуемо через css

зачем фото, лучше код, а еще лучше код в песочнице. В целом прижатие к низу весьма просто достигается:

.myClass {
  position: fixed;
  right: 0;
  bottom: 0;
}

и html прямо перед </body>