Now I would like to rearrange the content when the user presses a tab. For example rearrange this to 1Row x 4Cols instead of the 2Rows x 2Cols. The content stays absolutely the same though.
This is easily done with server side callbacks, by targeting the container as Output and having all the contents as State. Unfortunately that also means having to sent all the contents data over the network and with a lot of data this takes a lot of time.
I have found this related post but cant figure out a solution
That seems like a limitation of using bootstrap components (though as a caveat, I haven’t used dbc myself, maybe there’s a way) - they manage not just content but also parts of the styling that, if you use base html elements, you can do through CSS. Using plain html.Div components you should be able to target a callback to just the relevant style or className props, so that the same content will display in a different arrangement.
Yes, that CSS file has a lot of good stuff in it - I would encourage you though to take what you want from it rather than using it directly. There are a lot of base overrides there that may cause problems if you import them all.