css - 桌面端 2 列，移动端 1 列

Question

我有一个问题，我正在使用我制作的 2 列 wordpress 主题 (www.infobaires.com.ar)。除了 wp-touch 插件之外，它没有响应版本。

我有这个方案:

1 | 2
3 | 4
5 | 6
7 | 8

这是由两列组成的。一个向左浮动，一个向右浮动。

如果我进行一些“响应式更改”，它将修复如下:

第一栏
1
3
5
7
Col2
2
4
6
8

问题:我怎样才能做到这一点:

1
2
3
4
5
6
7

这是我的循环:

                        <?php global $post; $myposts = get_posts('numberposts=16&offset=3');    ?>
                        <div id="col1">
                        <?php
                        $i=1;
                        foreach($myposts as $post) :
                        if($i%2 != 0) :
                        setup_postdata($post);
                        $tema_especial = get_post_meta($post->ID,'tema_especial',true);
                        ?>

                        <div class="nota-c clearfix">
                        //Float right content
                        </div>

                        <?php   
                        endif;
                        $i++;
                        endforeach;
                        ?>
                        </div>
                        <div id="col2">
                        <?php
                        $i=1;
                        foreach($myposts as $post) :
                        if($i%2 == 0) :
                        setup_postdata($post);
                        $tema_especial = get_post_meta($post->ID,'tema_especial',true);
                        ?>

                        <div class="nota-c clearfix">
                        //Float left content
                        </div>


                        <?php endif;
                        $i++;
                        endforeach;
                        ?>

Answer 1

像这样的东西:

<div class="row">
    <div class="col1">1</div>
    <div class="col2">2</div>
</div>
<div class="row">
    <div class="col1">3</div>
    <div class="col2">4</div>
</div>    <div class="row">
    <div class="col1">5</div>
    <div class="col2">6</div>
</div>    <div class="row">
    <div class="col1">7</div>
    <div class="col2">8</div>
</div>

在桌面上它们 float :向左，在移动设备上它们 float :无。