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

我正在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(); ?>

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

}

---

您可以尝试固定表布局：

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

当然，图像应设置为：

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

---

在需要更改div顺序的布局中，正确的方法是使用

flexbox

使用

order

属性。在您的情况下，响应式布局如下所示：

.wrapper {
    display: flex;
    flex-direction: column;
}

.sidebar {
    order: 2;
}

.feature {
    order: 1;
}