Lord_Dantes

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

Через flex никак. Можно решить через float, если нельзя использовать grid:

Зашел в интернет посмотреть на брейкпоинты для адаптива и понял, что их много: 576px, 768px, 992px, 1200px, 1680px, 1920px, 2560px, 3440px и 4К(3840px)

Нет, ну не совсем так конечно. Я например использую до 992px (до планшетной версии), до 1200px(до версии нетбука) и там уже по выбору или надобности использую 1440 или 1920 но редко.

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

Ну как раз таки чем больше "брейкпоинтов" тем это показатель что твоя верстка плывет абсолютно везде. Я делал лендос на флексах где в адаптиве просто сдвигал блоки один под один и все было нормально и ничего не слетало. Если мы конечно говорим не про кастомный дизайн.

Так вот хочу услышать от вас совета лучше мучиться с медиа-запросами или для front-end'а лучше использовать сетку бутстрап.

Если бы верстали на флексах у вас бы не было такого вопроса, если на гридах темболее. Ибо там по свойствам и так понятно что флекси лучше бутстрапа.

display: flex; flex-wrap: wrap;

если дизайнер работал по сетке, то верстать на Bootstrap

Не совсем обязательно.

Я например использую лишь сетку бутстрапа но в последнее время просто делаю условный container шириной 1140 или какая указана в макете шириной и по ней делаю флексами, так удобней я думаю гораздо.

.main__box{
display: flex;
flex-wrap: wrap;
}

Дальше задаете равную ширину всем блокам, и они будут переносится на следующую строку

Да, делайте для текста справа родителя задайте ему фикс ширину и text-align: left. Если много текста увеличивайте в высоту или придумайте сами.