html - 当标题位于响应式 View 中的不同列中时，将标题移到图像上方

Question

我在桌面 View 中并排显示两栏中的图像和博客摘录，但在移动 View 中我希望博客标题位于图像上方。我不确定如何执行此操作，因为它们位于 2 列中，或者是否有更简单的方法来定位图像？

    <div class="blogposts">
    <article class="one-post">
        <div class="blogposts-thumbs col-xs-12 col-sm-4">
            <?php
            if ( has_post_thumbnail() ) {
                the_post_thumbnail('',array('class' => 'img-fluid'));
            }
            ?>
        </div>
        <div class="blogposts-excerpts col-xs-12 col-sm-8">
            <h3><a href="page.html"><?php the_title(); ?></a></h3>
            <ul class="date-info">
            <li class="post-date"><?php echo get_the_date(); ?></li>
            <li><?php the_tags(); ?></li>
        </ul>
        <p><?php the_excerpt(); ?></p>
        <span><a href="single-post.html">Continue reading <i class="fa fa-angle-double-right" aria-hidden="true"></i>
    </article>
    </div>

Answer 1

您可以使用.hidden-xs 和.visible-xs 类在移动设备中显示和隐藏

<div class="blogposts">
    <article class="one-post">
        <div class="blogposts-thumbs col-xs-12 col-sm-4">

            <h3 class="visible-xs"><a href="page.html"><?php the_title(); ?></a></h3>

            <?php
            if ( has_post_thumbnail() ) {
                the_post_thumbnail('',array('class' => 'img-fluid'));
            }
            ?>
        </div>
        <div class="blogposts-excerpts col-xs-12 col-sm-8">

            <h3  class="hidden-xs"><a href="page.html"><?php the_title(); ?></a></h3>

            <ul class="date-info">
            <li class="post-date"><?php echo get_the_date(); ?></li>
            <li><?php the_tags(); ?></li>
        </ul>
        <p><?php the_excerpt(); ?></p>
        <span><a href="single-post.html">Continue reading <i class="fa fa-angle-double-right" aria-hidden="true"></i>
    </article>
</div>