列の表示順序を変更するにはモバイル/タブレットビュー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とブートストラップにはまったく新しいので、携帯電話やポートレートのタブレットビューでは、右の前に左の掛け金を表示するカスタム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スタイル（プッシュ＆プルを含む）を使用して、左を左に、右を右。かなり複雑です！

あなたが尋ねたことを達成するには、多くのことを単純化することをお勧めします。まず、2つのセクションの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> 

あなたはちょうどこのように、周りの二つのブロックを交換しています論理的にあなたが達成したいものです。

これを実行したら、これらのクラスを修正してください。ブートストラップのシステムは実際はかなり簡単です。彼らは4つの異なる画面サイズ、モバイル、タブレットポートレート/小、タブレットの風景/大、デスクトップを定義します。これらはあなたが興味を持っているものである、少なくとも列に対して、それぞれ、CSSクラスcol-xs-...、col-sm-...、col-md-...に対応し、col-lg-...。

ブートストラップが、この場合には（コンテナの幅を分割し、あなたをページ幅）を12の見えない列に変換します。次に、CSSクラスで占有する列の数を指定して、divの幅を指定することができます。 12を指定するとdivが全体の幅を占めることを意味し、6を指定すると幅の半分（6/12）しか占めないことを意味します。 col-sm-3あなたのdivがでタブレットに幅の四分の一を占めて意味のに対し

、一緒にこれを置くcol-xs-6を使用するには、携帯電話の画面サイズ（-xs）上に表示したページ（-6）の半値幅を取るためにあなたのdivに指示します縦向き。 1つのdivに複数のクラスを組み合わせて、画面サイズが大きくなるにつれdivの幅がどのように変化するかを指定することができます。

ブートストラップは「モバイルファースト」にも設計されています。その結果、より大きな画面サイズで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になるようにサイジングが変更されます。デスクトップのサイジングは、明示的に指定されていないので、これらの寸法を模倣します。

デスクトップ画面で2つの列を並べて使用し、残りのサイズがすべて右上になるように変更する場合は、の代わりにlgに変更してください。

これは、これが少し明確になり、達成したいことを達成することを願っています。

Answer 2

HTMLのメインコンテンツdivの前にサイドバーdivを配置すると、ブートストラッププッシュとプルを使用する必要はありません。次に、ビューポートが小さくなるにつれて、HTMLに表示される順序でサイドバーがメインコンテンツの上に自然に表示されます。だから、

：

• スイッチそれぞれのcol-sm-push-4とcol-sm-pull-8クラスを削除し、サイドバーやコンテンツ
• の順。