title: using multiple columns css from left to right, instead of top to bottom
body: <p>I'm using on a page on my website on wordpress,  css columns to display some content from its children page.
  all my page titles are displayed in 2 colums, alpahbeticaly.</p>
  
  <p>like this :</p>
  
  <p>Column 1     | Column 2</p>
  
  <p>Page Title A | Page Title F</p>
  
  <p>Page Title B | Page Title G</p>
  
  <p>Page Title C | Page Title H </p>
  
  <p>Page Title D | Page Title I </p>
  
  <p>Page Title E | Page Title J </p>
  
  <p>here is my html and php :</p>
  
  <pre><code>&lt;div class="column_artists_menu"&gt;
  
              &lt;?php
  
              $args = array(
              'post_type'      =&gt; 'page',     
              'post_parent'    =&gt; $post-&gt;ID,
              'order'          =&gt; 'ASC',
              'orderby'        =&gt; 'title',
              'post_status'   =&gt; 'publish',
              'posts_per_page' =&gt; -1,
              );
  
              $parent = new WP_Query( $args );
  
              if ( $parent-&gt;have_posts() ) : ?&gt;
  
              &lt;?php while ( $parent-&gt;have_posts() ) : $parent-&gt;the_post(); ?&gt;
  
  
  
              &lt;h1&gt;&lt;?php the_title(); ?&gt;&lt;/h1&gt;
  
  
  
                  &lt;?php endwhile; ?&gt;
  
                  &lt;?php endif; wp_reset_query(); ?&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my CSS : </p>
  
  <pre><code>.column_artists_menu{
  -moz-column-width: 50%;
  -webkit-column-width: 50%;
  -o-column-width: 50%;
  column-width: 50%;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  -o-column-count: 2;
  column-count: 2;
  -moz-column-gap: 20px;
  -webkit-column-gap: 20px;
  -o-column-gap: 20px;
  column-gap: 20px;
  -webkit-column-rule-width: 1px;
  -webkit-column-rule-color: #eeeeee;
  -webkit-column-rule-style: solid;
  -moz-column-rule-width: 1px;
  -moz-column-rule-color: #eeeeee;
  -moz-column-rule-style: solid;
  -o-column-rule-width: 1px;
  -o-column-rule-color: #eeeeee;
  -o-column-rule-style: solid;
  column-rule-width: 1px;
  column-rule-color: #eeeeee;
  column-rule-style: solid;
  }
  </code></pre>
  
  <p>it works perfectly.
  but my pages are sorted from top to bottom, like in the table above.
  what I would like to do is to get my pages title displayed like this, from left to right.</p>
  
  <p>Column 1     | Column 2</p>
  
  <p>Page Title A | Page Title B</p>
  
  <p>Page Title C | Page Title D</p>
  
  <p>Page Title E | Page Title F </p>
  
  <p>Page Title G | Page Title H </p>
  
  <p>Page Title I | Page Title J </p>
  
  <p>is there a way to do it and use the css column wich are very useful ?</p>
  
  <p>thanks a lot for your help</p>