CSS Layout How to - Set Column Count and use Media Queries

Question

We would like to know how to set Column Count and use Media Queries.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
@media only screen and (min-width: 480px) {
  article p {<!--   www .j a  v  a 2  s. co m-->
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}
</style>
</head>
<body>
  <section>
    <article>
      <h1>FooBlip</h1>
      <p>This is a test. This is a test. This is a test. This is a test. 
      This is a test. This is a test. This is a test. This is a test. This is a test. 
      This is a test. This is a test. This is a test. This is a test. This is a test. 
      This is a test. This is a test. This is a test. This is a test. This is a test. 
      This is a test. This is a test. This is a test. This is a test. This is a test. 
      This is a test. This is a test. This is a test. This is a test. This is a test. 
      This is a test. This is a test. This is a test. This is a test. This is a test. 
      This is a test. This is a test. This is a test. This is a test. This is a test. </p>
    </article>
    <section>
</body>
</html>

The code above is rendered as follows: