Hi there Corobori,
here is a code example of @m_hutleyâs suggestion
to duplicate the contentâŚ
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
background-color: #f9f9f9;
font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}
h1 {
font-size: 1.25em;
color: #444;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
}
#container-1,
#container-2 {
display: flex;
flex-wrap: wrap;
max-width: 62.5em;
padding: 0.5%;
margin: 2em auto;
border: 1px solid #999;
border-radius: 0.75em;
background-color: #fff;
box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
}
#container-2 {
display:none;
}
#container-1 > div,
#container-2 > div {
width: 32.33%;
padding: 1em;
margin: 0.5%;
border: 1px solid #999;
border-radius: 0.5em;
background-color: #efefff;
box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.3 );
}
#container-1 > div {
padding: 0;
border:0;
background-color: transparent;
box-shadow: none;
}
#container-1 > div:nth-of-type( 1 ) {
width:27%;
}
#container-1 > div:nth-of-type( 2 ) {
width:22%;
}
#container-1 > div:nth-of-type( 3 ) {
width:48%;
}
#container-1 > div > div {
padding: 1em;
margin-bottom: 0.5em;
border: 1px solid #999;
border-radius: 0.5em;
background-color: #efefff;
box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.3 );
}
@media ( max-width: 41em ){
#container-1 {
display: none;
}
#container-2 {
display: block;
width: 96%;
padding: 0 0.5em;
}
#container-2 > div {
width: 100%;
margin: 0.5em 0;
}
}
</style>
</head>
<body>
<h1>Page description</h1>
<div id="container-1">
<div>
<div>
<h2>1.1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur sit amet sem sed libero bibendum tempus faucibus
quis mi.
</p>
</div>
<div>
<h2>1.2</h2>
<p>
Curabitur vitae porta ex.
Praesent rutrum ex fringilla tellus tincidunt interdum.
Proin molestie lectus consectetur purus aliquam porttitor.
</p>
</div>
<div>
<h2>1.3</h2>
<p>
Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</p>
</div>
<div>
<h2>1.4</h2>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Curabitur tristique varius ullamcorper.
</p>
</div>
</div>
<div>
<div>
<h2>2.1</h2>
<p>
Nulla rhoncus vel ipsum in volutpat. Nam tortor
nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis
interdum justo ac justo vehicula consequat. Curabitur et
volutpat nibh. Phasellus rutrum lacus at dolor placerat
feugiat
</p>
</div>
<div>
<h2>2.2</h2>
<p>
Curabitur ullamcorper sit amet libero in ullamcorper.
Donec sed laoreet quam. Phasellus malesuada libero felis, non
elementum ex tincidunt eget. Quisque cursus arcu vel diam
consectetur, ac imperdiet est cursus. Fusce id nunc nibh.
</p>
</div>
<div>
<h2>2.3</h2>
<p>
Donec vehicula diam non leo efficitur, id euismod odio
tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed
et libero non diam tempor sagittis.
</p>
</div>
<div>
<h2>2.4</h2>
<p>
Nam venenatis diam ante, et cursus elit porttitor at. Morbi
mattis leo at ex vehicula, non vestibulum ligula aliquam.
Maecenas non nibh sollicitudin, porttitor odio in, elementum
arcu.
</p>
</div>
</div>
<div>
<div>
<h2>3.1</h2>
<p>
Morbi porta, sapien nec molestie molestie, odio
magna vestibulum lorem, vitae feugiat est leo sit amet
nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac
magna sed, pretium commodo odio. Sed porttitor augue velit,
quis placerat diam sodales ac.
</p>
</div>
<div>
<h2>3.2</h2>
<p>
In sapien massa, feugiat ut magna eu, hendrerit porttitor
justo. In vitae massa ipsum. Aliquam feugiat tortor sed diam
facilisis, et molestie dolor blandit.
</p>
</div>
<div>
<h2>3.3</h2>
<p>
Quisque vel egestas
ipsum. Integer sed elit eu orci blandit commodo in in erat.
Donec blandit, mi at gravida varius, nulla tellus vulputate
ex, vitae euismod erat lectus rutrum diam.
</p>
</div>
<div>
<h2>3.4</h2>
<p>
Donec pulvinar orci enim. In pulvinar congue ante, ac
rutrum odio bibendum volutpat. Phasellus ac sem consequat
lorem congue malesuada vitae vitae diam. Donec eu imperdiet
augue.
</p>
</div>
</div>
<!-- #container-1 --></div>
<div id="container-2">
<div>
<h2>1.1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur sit amet sem sed libero bibendum tempus faucibus
quis mi.
</p>
</div>
<div>
<h2>2.1</h2>
<p>
Nulla rhoncus vel ipsum in volutpat. Nam tortor
nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis
interdum justo ac justo vehicula consequat. Curabitur et
volutpat nibh. Phasellus rutrum lacus at dolor placerat
feugiat
</p>
</div>
<div>
<h2>3.1</h2>
<p>
Morbi porta, sapien nec molestie molestie, odio
magna vestibulum lorem, vitae feugiat est leo sit amet
nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac
magna sed, pretium commodo odio. Sed porttitor augue velit,
quis placerat diam sodales ac.
</p>
</div>
<div>
<h2>1.2</h2>
<p>
Curabitur vitae porta ex.
Praesent rutrum ex fringilla tellus tincidunt interdum.
Proin molestie lectus consectetur purus aliquam porttitor.
</p>
</div>
<div>
<h2>2.2</h2>
<p>
Curabitur ullamcorper sit amet libero in ullamcorper.
Donec sed laoreet quam. Phasellus malesuada libero felis, non
elementum ex tincidunt eget. Quisque cursus arcu vel diam
consectetur, ac imperdiet est cursus. Fusce id nunc nibh.
</p>
</div>
<div>
<h2>3.2</h2>
<p>
In sapien massa, feugiat ut magna eu, hendrerit porttitor
justo. In vitae massa ipsum. Aliquam feugiat tortor sed diam
facilisis, et molestie dolor blandit.
</p>
</div>
<div>
<h2>1.3</h2>
<p>
Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</p>
</div>
<div>
<h2>2.3</h2>
<p>
Donec vehicula diam non leo efficitur, id euismod odio
tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed
et libero non diam tempor sagittis.
</p>
</div>
<div>
<h2>3.3</h2>
<p>
Quisque vel egestas
ipsum. Integer sed elit eu orci blandit commodo in in erat.
Donec blandit, mi at gravida varius, nulla tellus vulputate
ex, vitae euismod erat lectus rutrum diam.
</p>
</div>
<div>
<h2>1.4</h2>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Curabitur tristique varius ullamcorper.
</p>
</div>
<div>
<h2>2.4</h2>
<p>
Nam venenatis diam ante, et cursus elit porttitor at. Morbi
mattis leo at ex vehicula, non vestibulum ligula aliquam.
Maecenas non nibh sollicitudin, porttitor odio in, elementum
arcu.
</p>
</div>
<div>
<h2>3.4</h2>
<p>
Donec pulvinar orci enim. In pulvinar congue ante, ac
rutrum odio bibendum volutpat. Phasellus ac sem consequat
lorem congue malesuada vitae vitae diam. Donec eu imperdiet
augue.
</p>
</div>
<!-- #container-2 --></div>
</body>
</html>
Or you can just download the fileâŚ
Corobori.html (8.2 KB)
coothead