Mystile Posts auf Index in kolommen abhängig von seitenbreite

Hallo,
ich möchte die posts auf der index-seite in kolommen anzeigen. Die Anzahl der Kolommen sollte abhängig von dem Bildschirmbreite sein. Also wenn es die Breite zulässt dann drei Kolommen, auf dem Tablet nur zwei und auf dem Handy nur ein.

Habe jetzt das Problem dass der Text aus der Kolommenhöhe in der nächste Zeile übergeht.

in css-Datei habe ich hinzugefügt:

.blog-three {
        float: left;
	width:23%;
	height: 25em;
	margin-left: 3%;

	padding-left: 1%;
	padding-right: 1%;
	padding-top: 1%;
	padding-bottom: 1%;

}

and in index.php habe ich folgende Abschnitt geändert

`<section id=“main“ class=“col-full“>

<?php woo_loop_before(); ?>

<?php if ( $woo_options[ ‚woo_homepage_blog‘ ] == „true“ ) {
$postsperpage = $woo_options[‚woo_homepage_blog_perpage‘];
?>

<?php

$the_query = new WP_Query( array( ‚posts_per_page‘ => $postsperpage ) );

if ( have_posts() ) : $count = 0;
?>

<?php $i = 0; ?>

<?php /* Start the Loop */ ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); $count++; ?>

<?php
if($i == 0) {
echo ‚<div class=“blog-row“>‘;
}
?>

<div class=“blog-three“>

<?php
/* Include the Post-Format-specific template for the content.
* If you want to overload this in a child theme then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( ‚content‘, get_post_format() );

?>

</div>

<?php
$i++;
if($i == 3) {
$i = 0;
echo ‚</div>‘;
}
?>

<?php
endwhile;
// Reset Post Data
wp_reset_postdata();
?>

<?php
if($i > 0) {
echo ‚</div>‘;
}
?>

<?php else : ?>

<article <?php post_class(); ?>>
<p><?php _e( ‚Sorry, no posts matched your criteria.‘, ‚woothemes‘ ); ?></p>
</article><!– /.post –>

<?php endif; ?>

<?php } // End query to see if the blog should be displayed ?>

<div id=“indexspace“ ></div>

</section>`

Wer kann helfen.