After completing the layout of my website, everything seems to be functioning well. However, I would like to ensure that I haven't overcomplicated it or used poor techniques.
The structure involves a main DIV with a nested table DIV, inside of which there are three table-cells as sub-divs.
<div id="container-main">
<div id="columns-3">
<div class="main-col-left-s"></div>
<div class="main-col-center-s"></div>
<div class="main-col-right-s"></div>
</div>
</div>
Each column contains different elements, resembling a layout similar to Pinterest's website.
When the screen size is reduced, I want only two columns to display initially, and eventually just one. While the transition from 3 to 1 column happens automatically, I faced challenges when going from 3 to 2 columns. To address this, I utilized the CSS property display: none on the middle column when the screen becomes too small, ensuring it is not visible. Additionally, I assumed that data will be transferred to the visible column if the current one is hidden.
Is this solution considered effective, or are there better alternatives?
I aim to avoid situations where one row displays 2 columns while the next only shows 1, as illustrated below:
ǀdataǀdataǀ
ǀdataǀ ǀ
-----------
ǀdataǀdataǀ
ǀdataǀ ǀ
Instead, the layout should always adhere to the following pattern:
ǀdataǀdataǀ
ǀdataǀdataǀ
-----------
ǀdataǀdataǀ
ǀdataǀdataǀ