По какому принципу написать bootstrap структуру?
красиво ты это через бутсраповские col не реализуешь. делай сам. через inline-block/float:left к примеру. и каждому блоку задавай свою ширину. а в media меняй
На бутстрапе 12 колоночная сетка, которая подходит не всегда.
Я написал для себя свои сетки на 2 3 4 6 8 10 12 16 колонок и под каждое разрешение
После этого в конкретном проекте (или модуле) задаю класс b-grid_padding_8 b-grid_margin_bottom_16, а по умолчанию сетка без отступов вообще.
Таким образом если мне нужны нестандартные (неодинаковые колонки) - я либо подбираю нужное соотношение в сетках, а если его невозможно подобрать в процентах - задаю g-grid__col без цифры, а потом добавляю второй класс .b-project__colleft/right и указываю размеры ячеек для левой колонки например width: 200px, для правой width: calc(100% - 200px).
Конкретно по вашему примеру: у вас сетка начинается не отступом, а колонкой (отступа то ли нет вообще, то ли он уже использован для того, чтобы сместить всю верстаемую страницу) - а внутри отступ есть - то есть по любому у вас будет "сетка-в-сетке" или "сетка-в-контейнере".