Арсений Матыцин

Я наставничаю по фронту и вот что скажу. Когда ты учишься по программе, то использовать готовые решения — почти табу, так как задачу обучения — научить верстать, а не копировать. Т.е. привить понимание того, что ты делаешь.

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

Поэтому как для этапа обучения — все верно, учись сам такое делать, к тому же ничего сложного. Как для реальной жизни — бред, использовать такой подход вполне законно.

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

Самую малость оффтопом: я считаю нормой давать сперва материал по конкретным технологиям, а потом дополнять упрощениями, библиотеками и т.д. А не наоборот, когда сперва учишь как использовать бутстрап, а потом объясняешь, к примеру, зачем нужен aria-label.

Адаптивность в bootstap достигается добавлением ключа медиазапроса, например col-md-3. Сейчас я вижу правило col-3, а оно работает для абсолютно всех разрешений. По тому же принципу делаются и отступы mb-md-[n].

Колонки, которые находятся внутри .row по умолчанию имеют размер на всю высоту, это свойства flex. Собсно, углубись в матчасть, чтобы понимать, как это работает. Row → родитель, col- → ребенок flex-а.

PS: если ты задашь schema-block, который находится внутри col, то получишь почти такую же верстку, как и во втором варианте + отступы слева и справа, которые формируются стилями bootstrap.

Если ты знаешь конечное количество заранее, то используй селекторы (количество столбцов ты точно знаешь заранее, первую строку, а вот последнюю не факт).
Если ты не знаешь, то используй JS, чтобы определить крайние элементы и убирать им границу.
Ты можешь использовать table, они умеют во внутренние границы, но ты просрешься на адаптиве.
Ты можешь использовать гриды с gap и цветом фона родителя в цвет границы и «белым» дивов, тогда они будут проглядывать.
Ты можешь использовать background на повторе, который будет имитировать эти границы.

Короче, вариантов уйма просто. Выбирай не хочу и иди реализовывать.

1. Нет, справа элементы вложены в другой. А порядок рассчитывается на одном уровне.
1.1 Если бросить идею зачем-то менять порядок, если 2 все равно идет в начале, то просто вложи «правые» элементы внутрь еще одного и уже в них управляй порядком в респонсиве.
2. Если использовать какой-нить masonry, то можно попытаться.
3. Лучше заюзать гриды для таких перестанов.

Перейти на последний бутстрап

А, ну и вся эта мотня должна быть в строке <div class="row">....

Класс .table-responsive применяется не к самой таблице, а к обертке. Например div.
А чтобы задать размер, нужно задать, собственно, размер. Атрибут width приведет к невалидности кода, поэтому либо стилями, либо js на лету.
Ну а запрет переносов делает верстке чаще всего больно.

Обертка bootstrap table-responsive не управляет содержимым ячеек. Оно добавляет горизонтальную прокрутку, если не хватает места.

Оборачивать каждый в .col-lg-3, не забывая про перестройку до одной колонки для телефонов. Все в один .row.

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