Picture a bootstrap grid setup with an 8:4 layout.
<div class="container">
<div class="row">
<div class="col-md-8">
</div>
<div class="col-md-4">
</div>
</div>
</div>
The user has the ability to adjust the content within this grid. They can choose to place their content in either of the columns, depending on their needs.
For example, consider two tables:
<div class="row">
<div>
<table>
</table>
</div>
<div>
<table>
</table>
</div>
</div>
If the two tables are placed in the larger column, they should sit side by side until a certain screen width is met, at which point they should stack on top of each other.
Conversely, if the two tables are placed in the smaller column, they should always appear stacked on top of each other due to the limited space available.
Is it possible to achieve this using just CSS?
Furthermore, as the layout becomes even smaller, both columns should eventually stack on top of each other. With the "col-md-" classes used, reaching the specified breakpoint should trigger this stacking behavior. However, if the user places two tables in the smaller column and the "md" breakpoint is reached, there may be some minor discrepancies in the layout. Is it possible to avoid these discrepancies, or will they have to be accepted as part of the design?