6,030
edits
Changes
no edit summary
<div class="container">
<style>
<div class="column">
/* Set up the three columns */
<div class="content">
.container {
<h2>Column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit enim, non ultrices dolor scelerisque id. Integer auctor nunc purus, ac suscipit lectus tristique eu.</p>
</div>
</div>
}
<div class="column">
<div class="content">
<h2>Column 2</h2>
<p>Phasellus accumsan lobortis magna, a ultricies sapien hendrerit id. Vestibulum sed lorem id libero lobortis aliquam in vitae enim. Ut ornare dapibus velit, eget egestas enim bibendum ac.</p>
</div>
</div>
<div class="column">
<div class="content">
<h2>Column 3</h2>
<p>Curabitur vel neque vel tortor accumsan bibendum. Nullam a mauris ipsum. Nullam ullamcorper, mauris ac vehicula varius, turpis purus aliquet est, eget pretium odio urna eu enim.</p>
</div>
</div>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.column {
flex-basis: calc(33.33% - 20px);
margin-bottom: 20px;
}
.content {
background-color: #f2f2f2;
padding: 20px;
}
@media only screen and (max-width: 768px) {
.column {
.column {
flex-basis: calc(33.33% - 20px);
flex-basis: 100%;
}
}
}
</style>
</div>