My jsfiddle example showcases different card boxes, and I am currently focusing on making the 'Table 1' box responsive. However, I have encountered an issue:
Check out my jsfiddle example here
code
If you open the jsfiddle with a large enough browser window, you will see the page load as shown in this image: https://i.sstatic.net/9rxS5.png
I am satisfied with the positioning of the boxes. But when you resize the window to be smaller using tools like chrome's inspect element console, the page will adjust and move the 'Table 1' box like this:
https://i.sstatic.net/2YgpY.png
While I am okay with this resizing behavior, the problem arises when trying to return to the initial layout without refreshing the page. If I remove the Chrome console dev tool, the 'Table 1' box does not revert back to its original position:
https://i.sstatic.net/Gnj3m.png
What steps can I take to prevent this? Do I need to add additional classes or Bootstrap styling to my 'Table 1' box for proper resizing? Your help on this matter would be greatly appreciated.
Thank you, Martin