css - 如何更改列显示顺序移动/平板电脑 View CSS Wordpress？

Question

我正在使用 Wordpress 事件主题，在单个事件页面上，我想在较小/纵向视口(viewport)中的主体副本上方显示左侧边栏内容。有问题的页面是:http://staging.foxandmonkey.co.uk/event/brunch-808-uk-garage/

这是主题从中提取的 PHP:

global $tp_sidebar, $tp_content_class, $tp_title;
if ( $tp_sidebar ) {
$right_class = 'col-sm-7 col-sm-push-5';
$left_class = 'col-sm-5 col-sm-pull-7';
}
else {
$right_class = 'col-sm-8 col-sm-push-4';
$left_class = 'col-sm-4 col-sm-pull-8';
}
?>

<?php tribe_get_template_part( 'custom/wrapper-start' ); ?>

<div id="tribe-events-content" class="tribe-events-single vevent hentry">

<!-- Notices -->
<?php 
if ( function_exists('tribe_the_notices') ) {
    tribe_the_notices();
}
elseif ( function_exists('tribe_events_the_notices') ) {
    tribe_events_the_notices();
}
?>

<div class="events-single-right <?php echo esc_attr( $right_class ); ?>">

    <?php while ( have_posts() ) :  the_post(); ?>
        <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

            <?php if ( !$tp_title ) : ?>
                <h2 class="entry-title">
                    <?php the_title() ?>
                </h2>
            <?php endif; ?>

            <!-- Event featured image, but exclude link -->
            <?php if(has_post_thumbnail()) : ?>
                <div class="tribe-events-event-image">
                    <?php the_post_thumbnail( 'large' ); ?>
                </div>
            <?php endif; ?>

            <!-- Event content -->
<?php do_action( 'tribe_events_single_event_before_the_content' ) ?>

<div class="tribe-events-single-event-description tribe-events-   content entry-content description">
                <?php the_content(); ?>
            </div>
            <!-- .tribe-events-single-event-description -->
            <?php do_action( 'tribe_events_single_event_after_the_content' ) ?>

        </div> <!-- #post-x -->
    <?php endwhile; ?>

</div>

<div class="events-single-left <?php echo esc_attr( $left_class ); ?>">

    <?php tribe_get_template_part( 'custom/cta' ); ?>

    <!-- Event meta -->
    <?php do_action( 'tribe_events_single_event_before_the_meta' ) ?>

    <?php do_action( 'tribe_events_single_event_meta_primary_section_start' ); ?>

    <?php tribe_get_template_part( 'modules/meta/details' ); ?>

    <?php do_action( 'tribe_events_single_event_meta_primary_section_end' ); ?>

    <?php tribe_get_template_part( 'modules/meta/venue' ); ?>

    <?php tribe_get_template_part( 'modules/meta/map' ); ?>

    <?php tribe_get_template_part( 'custom/schedule' ); ?>

    <?php tribe_get_template_part( 'custom/custom' ); ?>

    <?php 
    // Include organizer meta if appropriate
    if ( tribe_has_organizer() ) {
        tribe_get_template_part( 'modules/meta/organizer' );
    } 
    ?>

    </div>

该页面没有侧边栏，所以我假设这部分是定义左右内容的部分:

$right_class = 'col-sm-8 col-sm-push-4';
$left_class = 'col-sm-4 col-sm-pull-8';

我是 CSS 和 Bootstrap 的新手，所以您能帮我设置一些自定义 CSS 以在移动设备和纵向平板电脑 View 中先显示左侧的 calss 吗？这是主题文件中当前的 CSS:

#tribe-events-content.tribe-events-single {
background: white;
margin: 0 0 30px;
padding: 50px;
}
#tribe-events-content.tribe-events-single .events-single-left {
padding: 0;
margin-bottom: 25px;
}
@media (max-width: 767px) {
#tribe-events-content.tribe-events-single .events-single-left {
min-height: 200px !important;
 }
}
@media (min-width: 768px) {
#tribe-events-content.tribe-events-single .events-single-left {
border-right: 1px solid #3ec9ce;
 }
}
#tribe-events-content.tribe-events-single .events-single-right {
padding: 0;
}
@media (max-width: 767px) {
#tribe-events-content.tribe-events-single .events-single-right {
min-height: 200px !important;
 }
}

感谢您给我的任何建议!

Answer 1

目前，您的左侧和右侧部分正在向后呈现，因为右侧部分在您的 PHP 页面生成的 HTML 中出现在左侧之前。 left 和 right 类(你已经正确地认为是重要的)然后使用一些更高级的 Bootstrap 样式(包括推和拉)来基本​​上重新排序部分，以便左侧出现在左侧，右侧出现在右侧正确的。相当复杂!

为了完成您所要求的，我建议大大简化事情。首先，您需要更改这两个部分的 PHP 页面中的顺序。拿右边的部分，这是以 <div class="events-single-right" ... 开头的 div并将它连同其内容一起移动到左侧部分下方(在本例中是代码示例的最底部)。这可以更好地说明这个想法:

旧结构:

(other code)

<div class="events-single-right <?php echo esc_attr( $right_class ); ?>">
    (right div contents)
</div>

<div class="events-single-left <?php echo esc_attr( $left_class ); ?>">
    (left div contents)
</div>

新结构:

(other code)

<div class="events-single-left <?php echo esc_attr( $left_class ); ?>">
    (left div contents)
</div>

<div class="events-single-right <?php echo esc_attr( $right_class ); ?>">
    (right div contents)
</div>

从本质上讲，您只是交换了两个 block ，所以左边的部分排在第一位，因为这在逻辑上是您想要实现的。

完成后，修复这些类。 Bootstrap 的系统实际上非常简单。他们定义了 4 种不同的屏幕尺寸，移动设备、平板电脑纵向/小型、平板电脑横向/大型和桌面。这些对应于 CSS 类 col-xs-... , col-sm-... , col-md-... , 和 col-lg-... ，至少对于您感兴趣的列。

然后，Bootstrap 将容器的宽度(在本例中为您的页面宽度)分成 12 个不可见的列。然后，您可以通过在 CSS 类中给出要占据的这些列的数量来指定 div 的宽度。指定 12 意味着 div 占据整个宽度，而指定 6 意味着它只占据宽度的一半(6/12)。

将这些放在一起，使用 col-xs-6指示您的 div 在移动屏幕尺寸 ( -6 ) 上查看时占据页面宽度的一半 ( -xs )，而 col-sm-3意味着您的 div 在纵向方向的平板电脑上占据四分之一的宽度。您可以将多个类合并到一个 div 中，以指定该 div 的宽度如何随着屏幕尺寸的增加而变化。

Bootstrap 还被设计为“移动优先”。这样做的结果是，如果您没有明确地为较大屏幕尺寸的 div 指定宽度，Bootstrap 会反向工作并假定您希望保持与较小屏幕尺寸相同的 div 宽度(列数)。此外，div 本质上默认为 col-xs-12如果您没有指定任何类，这与上面的规则相结合意味着默认情况下 div 占据所有屏幕尺寸的整个宽度(12 列)(较大的屏幕尺寸都向下看移动尺寸并复制它)。

将所有这些放在一起，您需要的类如下所示:

$left_class = 'col-md-4';
$right_class = 'col-md-8';

这将使左侧和右侧部分在移动设备和纵向平板电脑(xs 和 sm)上占据整个宽度(因此在彼此垂直上方)，因为我们没有为这些明确指定任何类屏幕尺寸和默认值始终从 col-xs-12 开始.然后我们指定 col-md-4和 col-md-8 ，这意味着从横向平板电脑屏幕开始，尺寸发生变化，使左侧部分占宽度的 1/3，右侧部分占宽度的 2/3。然后，桌面大小调整会模仿这些尺寸，因为它也没有明确指定。

如果您想进一步更改，以便只有桌面屏幕并排使用两列，而在所有其他尺寸上，左在右上方，只需将这些类更改为 lg而不是 md .

我希望这能让事情变得更清楚一些，并实现您想要实现的目标。