2017-08-22 6 views
0

を引く私の周りを検索し、このスレッドを見つけた:Bootstrap Alternating Layout to stacked in mobileブートストラッププッシュを使用して

しかし、私はプッシュを追加して、自分のコードを引っ張ったときに、私は押しても、完全なデスクトップビューで発生引っ張っます。

<section class="block block--2"> 

<div class="container"> 

    <div class="row padbot20"> 
     <div class="col-md-4 center col-sm-12 col-xs-12"> 
      <center> 
       <i class="fa_black_icon fa fontawesome-icon fa-address-book"></i> 
      </center> 
     </div> 
     <div class="col-md-8 col-sm-12 col-xs-12"> 
      <div class="heading padbot20"> 
       <h3 class="black_txt"> 
        {% text "section_2_row_1_heading", overrideable=True, value="Supplier Management", label="Section 2 Row 1 Heading", no_wrapper=True %} 
       </h3> 
      </div> 
      <div class="row-paragraph"> 
       {% rich_text "section_2_row_1_content", overrideable=True, value="<p>With Volo, you’ll can keep all your key supplier information up to date so you know exactly where you are. Monitor the prices you’re paying for your stock, use automated data feeds to increase productivity, or use drop-shippers to do the product storage and delivery for you – the choice is yours.</p>", label="Section 2 Row 1 Content", no_wrapper=True %} 
      </div> 
     </div> 


    </div> 

    <div class="row padtop20 padbot20"> 
     <div class=" col-md-8 "> 
      <div class="heading padbot20"> 
       <h3 class="black_txt"> 
        {% text "section_2_row_2_heading", overrideable=True, value="Inventory & Stock Control ", label="Section 2 Row 2 Heading", no_wrapper=True %} 
       </h3> 
      </div> 
      <div class="row-paragraph"> 
       {% rich_text "section_2_row_2_content", overrideable=True, value="<p>Control your physical and virtual inventory data across all your sales channels with Volo, from single custom items through to managing millions of SKUs and variations. We’ve made it simple: one central location for storing all the information needed for the different channels. Sell items on one channel and we’ll automatically update the rest.</p>", label="Section 2 Row 2 Content", no_wrapper=True %} 
      </div> 
     </div> 
     <div class="col-md-4 center"> 
      <center> 
       <i class="fa_black_icon fa fontawesome-icon fa-cubes"></i> 
      </center> 
     </div> 
    </div> 

    <div class="row padtop20 padbot20"> 
     <div class="col-md-4 center col-sm-12 col-xs-12"> 
      <center> 
       <i class="fa_black_icon fa fontawesome-icon fa-sitemap"></i> 
      </center> 
     </div> 
     <div class="col-md-8 col-sm-12 col-xs-12"> 
      <div class="heading padbot20"> 
       <h3 class="black_txt"> 
        {% text "section_2_row_3_heading", overrideable=True, value="Multichannel Management", label="Section 2 Row 3 Heading", no_wrapper=True %} 
       </h3> 
      </div> 
      <div class="row-paragraph"> 
       {% rich_text "section_2_row_3_content", overrideable=True, value="<p>Selling successfully is about being in the right places, responding quickly and capitalizing on the opportunities. We’ll enable you to reach new markets, new audiences, and new sales targets. Volo gives you resilience across all your channels</p>", label="Section 2 Row 3 Content", no_wrapper=True %} 
      </div> 
     </div> 
    </div> 

    <div class="row padtop20 padbot20"> 
     <div class="col-md-8 col-sm-12 col-xs-12"> 
      <div class="heading padbot20"> 
       <h3 class="black_txt"> 
        {% text "section_2_row_4_heading", overrideable=True, value="Order Management", label="Section 2 Row 4 Heading", no_wrapper=True %} 
       </h3> 
      </div> 
      <div class="row-paragraph"> 
       {% rich_text "section_2_row_4_content", overrideable=True, value="<p>At Volo, our approach is to help bring together all your sales information into a single, coherent view so you can streamline your processes. From matching orders to payments quickly, through to shipping list for packing, manifests for shipments, and invoice and delivery documentation.</p>", label="Section 2 Row 4 Content", no_wrapper=True %} 
      </div> 
     </div> 
     <div class="col-md-4 center col-sm-12 col-xs-12"> 
      <center> 
       <i class="fa_black_icon fa fontawesome-icon fa-credit-card"></i> 
      </center> 
     </div> 
    </div> 
    <div class="row padtop20 padbot20"> 
     <div class="col-md-4 center col-sm-12 col-xs-12"> 
      <center> 
       <i class="fa_black_icon fa fontawesome-icon fa-truck"></i> 
      </center> 
     </div> 
     <div class="col-md-8 col-sm-12 col-xs-12"> 
      <div class="heading padbot20"> 
       <h3 class="black_txt"> 
        {% text "section_2_row_5_heading", overrideable=True, value="Shipping", label="Section 2 Row 5 Heading", no_wrapper=True %} 
       </h3> 
      </div> 
      <div class="row-paragraph"> 
       {% rich_text "section_2_row5_content", overrideable=True, value="<p>We can help you reduce time and costs by implementing a completely integrated fulfillment process. You’ll be able to connect your carriers, shipping aggregators and consolidators into one system, giving you effective and efficient control.</p>", label="Section 2 Row 5 Content", no_wrapper=True %} 
      </div> 
     </div> 
    </div></div></section> 

しかし、私はプッシュを追加し、引っ張るとき、私は大規模なギャップデスクトップ版とプッシュに登場し、「追加するにもかかわらず、適用され、まだ引っ張ってもらうCOL-XSを-プッシュ:たとえば

12" および "COL-XSプル-12" のコード例(及びスクリーンショット)には -

スクリーン: コード:

 <section class="block block--2"> 

     <div class="container"> 

      <div class="row padbot20"> 
       <div class="col-md-4 center col-sm-12 col-xs-12"> 
        <center> 
         <i class="fa_black_icon fa fontawesome-icon fa-address-book"></i> 
        </center> 
       </div> 
       <div class="col-md-8 col-sm-12 col-xs-12"> 
        <div class="heading padbot20"> 
         <h3 class="black_txt"> 
          {% text "section_2_row_1_heading", overrideable=True, value="Supplier Management", label="Section 2 Row 1 Heading", no_wrapper=True %} 
         </h3> 
        </div> 
        <div class="row-paragraph"> 
         {% rich_text "section_2_row_1_content", overrideable=True, value="<p>With Volo, you’ll can keep all your key supplier information up to date so you know exactly where you are. Monitor the prices you’re paying for your stock, use automated data feeds to increase productivity, or use drop-shippers to do the product storage and delivery for you – the choice is yours.</p>", label="Section 2 Row 1 Content", no_wrapper=True %} 
        </div> 
       </div> 


      </div> 

      <div class="row padtop20 padbot20"> 
       <div class="col-md-8 col-sm-push-12 col-xs-push-12"> 
        <div class="heading padbot20"> 
         <h3 class="black_txt"> 
          {% text "section_2_row_2_heading", overrideable=True, value="Inventory & Stock Control ", label="Section 2 Row 2 Heading", no_wrapper=True %} 
         </h3> 
        </div> 
        <div class="row-paragraph"> 
         {% rich_text "section_2_row_2_content", overrideable=True, value="<p>Control your physical and virtual inventory data across all your sales channels with Volo, from single custom items through to managing millions of SKUs and variations. We’ve made it simple: one central location for storing all the information needed for the different channels. Sell items on one channel and we’ll automatically update the rest.</p>", label="Section 2 Row 2 Content", no_wrapper=True %} 
        </div> 
       </div> 
       <div class="col-md-4 center col-sm-pull-12 col-xs-pull-12"> 
        <center> 
         <i class="fa_black_icon fa fontawesome-icon fa-cubes"></i> 
        </center> 
       </div> 
      </div> 

      <div class="row padtop20 padbot20"> 
       <div class="col-md-4 center col-sm-12 col-xs-12"> 
        <center> 
         <i class="fa_black_icon fa fontawesome-icon fa-sitemap"></i> 
        </center> 
       </div> 
       <div class="col-md-8 col-sm-12 col-xs-12"> 
        <div class="heading padbot20"> 
         <h3 class="black_txt"> 
          {% text "section_2_row_3_heading", overrideable=True, value="Multichannel Management", label="Section 2 Row 3 Heading", no_wrapper=True %} 
         </h3> 
        </div> 
        <div class="row-paragraph"> 
         {% rich_text "section_2_row_3_content", overrideable=True, value="<p>Selling successfully is about being in the right places, responding quickly and capitalizing on the opportunities. We’ll enable you to reach new markets, new audiences, and new sales targets. Volo gives you resilience across all your channels</p>", label="Section 2 Row 3 Content", no_wrapper=True %} 
        </div> 
       </div> 
      </div> 

      <div class="row padtop20 padbot20"> 
       <div class="col-md-8 col-sm-12 col-xs-12"> 
        <div class="heading padbot20"> 
         <h3 class="black_txt"> 
          {% text "section_2_row_4_heading", overrideable=True, value="Order Management", label="Section 2 Row 4 Heading", no_wrapper=True %} 
         </h3> 
        </div> 
        <div class="row-paragraph"> 
         {% rich_text "section_2_row_4_content", overrideable=True, value="<p>At Volo, our approach is to help bring together all your sales information into a single, coherent view so you can streamline your processes. From matching orders to payments quickly, through to shipping list for packing, manifests for shipments, and invoice and delivery documentation.</p>", label="Section 2 Row 4 Content", no_wrapper=True %} 
        </div> 
       </div> 
       <div class="col-md-4 center col-sm-12 col-xs-12"> 
        <center> 
         <i class="fa_black_icon fa fontawesome-icon fa-credit-card"></i> 
        </center> 
       </div> 
      </div> 
      <div class="row padtop20 padbot20"> 
       <div class="col-md-4 center col-sm-12 col-xs-12"> 
        <center> 
         <i class="fa_black_icon fa fontawesome-icon fa-truck"></i> 
        </center> 
       </div> 
       <div class="col-md-8 col-sm-12 col-xs-12"> 
        <div class="heading padbot20"> 
         <h3 class="black_txt"> 
          {% text "section_2_row_5_heading", overrideable=True, value="Shipping", label="Section 2 Row 5 Heading", no_wrapper=True %} 
         </h3> 
        </div> 
        <div class="row-paragraph"> 
         {% rich_text "section_2_row5_content", overrideable=True, value="<p>We can help you reduce time and costs by implementing a completely integrated fulfillment process. You’ll be able to connect your carriers, shipping aggregators and consolidators into one system, giving you effective and efficient control.</p>", label="Section 2 Row 5 Content", no_wrapper=True %} 
        </div> 
       </div> 
      </div> 

      <div class="row padtop20 padbot20"> 
       <div class="col-md-8 col-sm-12 col-xs-12"> 
        <div class="heading padbot20"> 
         <h3 class="black_txt"> 
          {% text "section_2_row_6_heading", overrideable=True, value="Reporting & Analytics", label="Section 2 Row 6 Heading", no_wrapper=True %} 
         </h3> 
        </div> 
        <div class="row-paragraph"> 
         {% rich_text "section_2_row_6_content", overrideable=True, value="<p>Volo reporting & analytics turns your performance data into information, giving you the knowledge and confidence to make quick decisions that positively impact all the things you measure your success by: revenues, profits and cash flow.</p>", label="Section 2 Row 6 Content", no_wrapper=True %} 
        </div> 
       </div> 
       <div class="col-md-4 center col-sm-12 col-xs-12"> 
        <center> 
         <i class="fa_black_icon fa fontawesome-icon fa-pie-chart"></i> 
        </center> 
       </div> 
      </div> 
     </div> 

    </section> 

しかし、これが起こる:をhttps://gyazo.com/7a39f8711b274eda998d48eae5278634

私は間違っていますか?

何かアドバイスをいただければ幸いです - 感謝

答えて

0

あなたは以下のようにあなたのコードを維持する必要があります。

について - ルックアンドフィール翔

あなたのコードの構造は、あなたが単一の行で2列を必要とするように見えます。

デザインは、デスクトップ版でcol-md-4col-md-8でなければなりません。

モバイルデバイスとタブレットデバイスのデザインでは、col-sm-12のように表示されます。

以下のようなコード構造を作成し、以下のようなメンテナンスコードの定数を確認してください。

<section class=""> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-4 col-md-push-8 col-sm-12">Icon</div> 
      <div class="col-md-8 col-md-pull-4 col-sm-12">Details will be here.</div> 
     </div> 
     <div class="row"> 
      <div class="col-md-4 col-sm-12">Icon</div> 
      <div class="col-md-8 col-sm-12">Details will be here.</div> 
     </div> 
     <div class="row"> 
      <div class="col-md-4 col-md-push-8 col-sm-12">Icon</div> 
      <div class="col-md-8 col-md-pull-4 col-sm-12">Details will be here.</div> 
     </div> 
     <div class="row"> 
      <div class="col-md-4 col-sm-12">Icon</div> 
      <div class="col-md-8 col-sm-12">Details will be here.</div> 
     </div> 
    </div> 
</section> 

は、それはあなたのお役に立てば幸いです。..乾杯:)

関連する問題