CSS表按顺序排列元素，但图像不再响应

Question

我正在开发一个WordPress网站并开发博客文章页面。我已经设置好了，所以你的帖子在左边，侧边栏在右边。但是我已经把侧边栏代码放在页面的顶部，用逻辑来确定用户想要侧边栏的哪一边。

我试图解决的问题是，如果侧边栏代码位于移动设备的顶部，它将在博客文章之前显示。因此，我找到了一种使用表功能来帮助解决此问题的方法。这对除博客文章外的所有页面都很好，当我调整大小时，尽管我将缩略图限制在容器的最大宽度，但缩略图仍以其全尺寸显示。

PHP/HTML:

<?php get_header(); ?>
<div class="wrapper">   
    <?php if ( get_theme_mod( 'realestatepro_sidebar_position', esc_attr__( 'right', 'realestatepro' ) ) == "left" )  
        { echo '<div class="col-xs-12 col-sm-3 col-md-3 sidebar left-sidebar">'; }
    else
        { echo '<div class="col-xs-12 col-sm-3 col-md-3 sidebar right-sidebar">'; }
    ?>
        <?php get_sidebar(); ?>
    </div>
    <div class="col-xs-12 col-sm-9 col-md-9 feature">
        <div class="col-xs-12 col-sm-12 col-md-12 blog-article">
            <?php 
            if( have_posts() ):
                while( have_posts() ): the_post(); ?>
                    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <?php the_title('<h3 class="entry-title">','</h3>' ); ?>
                                <small>Post in:<?php the_category(' '); ?>, by <?php the_author_link(); ?> on <?php the_time('F jS, Y'); ?></small>
                            </div>
                        <?php if( has_post_thumbnail() ): ?>
                            <div class="col-xs-12 col-sm-12 col-md-12">
                                <?php the_post_thumbnail('full'); ?>
                            </div>
                        <?php endif; ?>
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <?php the_content(); ?>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <hr>
                            <div class="col-xs-6 text-left"><?php previous_post_link(); ?></div>
                            <div class="col-xs-6 text-right"><?php next_post_link(); ?></div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12">
                            <hr>
                            <?php 
                                if( comments_open() ){ 
                                    comments_template(); 
                                }                               
                             ?>
                        </div>
                    </article>
                <?php endwhile;
            endif;
            ?>
        </div>
    </div>
</div>
<?php get_footer(); ?>

CSS:

.blog-article img {
    height: auto;
    max-width: 100%;
    margin: 10px 0px;
}
.left-sidebar {
    float: left;
}
.right-sidebar {
    float: right;
}
@media (max-width: 767px) {
    .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
        float: none;
    }
    .wrapper {
        display: table;
        float: right;
    }
    .sidebar {
        display: table-footer-group;
    }
    .feature {
        display: table-header-group;
    }
}

Answer 1

您可以尝试固定的表布局：

.wrapper {
  display: table;
  width: 100%; /*added*/
  table-layout: fixed; /*added*/
}

当然，图像应该设置为：

img {
  max-width: 100%;
  height: auto;
}

https://jsfiddle.net/n7bpz5sj/1/

Answer 2

在需要更改div顺序的地方进行布局的正确方法是使用order属性使用flexbox。在您的情况下，响应布局看起来像这样：

.wrapper {
    display: flex;
    flex-direction: column;
}
.sidebar {
    order: 2;
}
.feature {
    order: 1;
}