如何更改列顯示順序手機/平板電腦視圖CSS Wordpress？

Question

我正在使用Wordpress事件主題，並且在單個事件頁面上我想要在較小/縱向視口中的主體副本上方顯示左側邊欄內容。有問題的頁面是：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來在移動和肖像平板視圖中顯示左邊的權利之前？這裏是目前在主題文件中的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左側之前。然後左邊和右邊的類（你已經正確認定是重要的）使用一些更高級的Bootstrap樣式（包括push和pull）來基本上重新排列這些部分，這樣左邊出現在左邊，右邊出現在對。相當複雜！

要完成你所問的問題，我建議大量簡化。首先，您需要更改這兩部分的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> 

從本質上講，你只是交換兩個塊左右，因此左側部分是第一位的，因爲這在邏輯上是你想要達到的。

一旦你這樣做，修復這些類。 Bootstrap的系統實際上非常簡單。他們定義了4種不同的屏幕尺寸，移動，平板電腦人像/小型，平板電腦風景/大型和桌面。這些對應的CSS類col-xs-...，col-sm-...，col-md-...和col-lg-...，分別至少爲列，這是你感興趣的問題。

引導則劃分了容器的寬度（在這種情況下，您的頁面寬度）分成12個不可見列。然後，您可以通過在CSS類中指定要佔用的這些列的數量來指定div的寬度。指定12意味着div佔據整個寬度，而指定6意味着佔據寬度的一半（6/12）。

把這個在一起，使用col-xs-6指示您的DIV佔用移動屏幕尺寸（-xs）瀏覽網頁時（-6）寬度的一半，而col-sm-3意味着你的DIV在佔用寬度的四分之一平板電腦縱向。您可以將多個類合併爲一個div，以指定div的寬度隨着屏幕尺寸的增加而變化。

Bootstrap也被設計爲'移動優先'。這樣做的結果是，如果您沒有在較大的屏幕尺寸中明確給出div的寬度，Bootstrap會向後運行，並假定您希望保持相同的div寬度（列數），因爲屏幕尺寸較小。此外，如果您沒有指定任何類，則Divs實質上默認爲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。

我希望這可以讓事情變得更清晰一些，並達到你想達到的目的。

Answer 2

如果將側邊欄div放在HTML中的主內容div之前，則不需要使用Bootstrap推送和拉取。然後，隨着視口變小，側邊欄自然會出現在主要內容的上方，因爲這是它們在HTML中出現的順序。

所以：

• 開關側邊欄和內容
• 的順序拆下相應的col-sm-push-4和col-sm-pull-8類。