从左到右使用多列css，而不是从上到下

Question

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.

like this :

Column 1 | Column 2

Page Title A | Page Title F

Page Title B | Page Title G

Page Title C | Page Title H

Page Title D | Page Title I

Page Title E | Page Title J

here is my html and php :

<div class="column_artists_menu">

            <?php

            $args = array(
            'post_type'      => 'page',     
            'post_parent'    => $post->ID,
            'order'          => 'ASC',
            'orderby'        => 'title',
            'post_status'   => 'publish',
            'posts_per_page' => -1,
            );

            $parent = new WP_Query( $args );

            if ( $parent->have_posts() ) : ?>

            <?php while ( $parent->have_posts() ) : $parent->the_post(); ?>



            <h1><?php the_title(); ?></h1>



                <?php endwhile; ?>

                <?php endif; wp_reset_query(); ?>
</div>

and my CSS :

.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;
}

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.

Column 1 | Column 2

Page Title A | Page Title B

Page Title C | Page Title D

Page Title E | Page Title F

Page Title G | Page Title H

Page Title I | Page Title J

is there a way to do it and use the css column wich are very useful ?

thanks a lot for your help

Answer 1

You should not use CSS3 columns for this layout. For example, use "rows" instead:

<style>
.row > div {
    float: left;
}
</style>

<div class=“row”>
    <div>
        <h2>Page Title A</h2>
    </div>
    <div>
        <h2>Page Title B</h2>
    </div>
</div>
<div class=“row”>
    <div>
        <h2>Page Title C</h2>
    </div>
    <div>
        <h2>Page Title D</h2>
    </div>  
</div>