: Best practice with visual responsive html restructuration I have to follow a sketch of the main webpage of a website I'm building. The main page is essentially blocks rendered as rows, but one

Posted in: #DuplicateContent #Layout #Magento #ResponsiveWebdesign #Seo

I have to follow a sketch of the main webpage of a website I'm building. The main page is essentially blocks rendered as rows, but one row is divided in 4 blocks that are not of the same height (so I can't simply use display: inline-block; or float: left).

On the desktop version, the way the blocks are displayed is that way:

[div1] [div2]
[div3] [div4]

which gives the following HTML structure :

<div class="row">
<div class="column">
<div class="block">[div1]</div>
<div class="block">[div3]</div>
</div>
<div class="column">
<div class="block">[div2]</div>
<div class="block">[div4]</div>
</div>
</div>

NB: the height of the columns and blocks are not necessarily equal; all blocks have same width which is roughly the width of the column - paddings.

But, on the mobile version, the way the blocks are displayed is that way :

[div1]
[div2]
[div3]
[div4]

Which gives the following HTML structure:

<div class="row">
<div class="block">[div1]</div>
<div class="block">[div2]</div>
<div class="block">[div3]</div>
<div class="block">[div4]</div>
</div>

The solution I currently use is to create both rows but with one disappearing, depending on the viewport width.

Is there a better way to apply both displays (which is not based on a barely supported CSS/HTML feature) for both viewports without duplicating the content for SEO reasons ?

I'm working on Magento CMS, so, in order to avoid adding too many libraries, if the solution is to use JavaScript, is there a tool Magento provides in its existing libraries or a simple way (not just "listening to window resize event" dubious method ...) to manage dynamic viewport changes so I can move the blocks dynamically ?

If the solution is by using JavaScript, how would this solution be fitted for users/browsers which don't use javascript ?