<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h3>Divide Email Copy Into Even Columns with Column-Count</h3>
</div>
<div class="row"></div>
<p class="media-responsive-columns">The purpose of these columns is to fit the copy content into the media size.
It uses the Graceful Degradation and Progressive Enhancement available in Responsive Design.
It's a combination of CSS3 media properties to increase or decrease the numbers or columns depending on any device used to display the email message.
<br /><br />
<span class="strong">NOTE:</span> Beware of Outlook! Outlook stands on its own when it comes to email rendering.
<br /><br />
<span class="strong">Here's a sample code:</span><br /><br />
<pre>
.media-responsive-columns {<br />
-webkit-column-count: 3; /* Chrome, Safari, Opera */<br />
-moz-column-count: 3; /* Firefox */<br />
column-count: 3;<br />
}
</pre>
<br />
<span class="strong">Here's how you can change the Column Count property for smaller media sizes:</span><br /><br />
<pre>
@media (max-width: 480px) {<br />
.media-responsive-columns {<br />
-webkit-column-count: 1; /* Chrome, Safari, Opera */<br />
-moz-column-count: 1; /* Firefox */<br />
column-count: 1;<br />
}<br />
}
</pre>
<br />
Easily add code to any website, especially not using either Bootstrap or Foundation. This's a quick and easy way to get the responsiveness you want without spending money & time.
</p>
</div>
</div>
