自舉列排序不起作用

我有以下網格，我試圖在右側顯示圖像，在左側顯示sm，md和lg屏幕。然而，在XS屏幕上，我想重新排列圖像，使其在文本上方。當我嘗試推拉 xs設備時，整個佈局會變得混亂。什麼是實現這一目標的正確方法？自舉列排序不起作用

<div class="container"> 
       <div class="row"> 
        <div class="col-xs-12 col-sm-5 col-xs-push-12"> 
         <h3 class="h3 ">Some heading</h3> 
         <p>some text</p> 
        </div> 
        <div class="clearfix visible-xs-block"></div> 
        <div class="col-xs-12 col-sm-7 col-xs-pull-12" > 
         <img src="img/someimage.png" class="img-responsive" > 
        </div> 
       </div> 

</div>

來源

2015-11-02 adam78

你能告訴我們在一個小提琴發生了什麼，請 –

其確定我已經成功通過工作移動第一即訂購HTML我多麼希望它出現一個xs設備上進行修復，然後使用推拉來在桌面設備上重新排序。 – adam78

修正如下：

<div class="container"> 
      <div class="row"> 
       <div class="col-sm-7 col-sm-push-5" > 
        <img src="img/someimage.png" class="img-responsive" > 
       </div> 
       <div class="col-sm-5 col-sm-pull-7"> 
        <h3 class="h3 ">Some heading</h3> 
        <p>some text</p> 
       </div> 

      </div> 

</div>

來源

2015-11-02 23:38:37 adam78

一個簡單的方法來解決，這將是隱藏一些東西在一定的屏幕尺寸：

<div class="container"> 
      <div class="row"> 
      <div class="col-xs-12 visible-xs" > 
       <img src="images/img_back.jpg" class="img-responsive" > 
      </div> 

      <div class="col-xs-12 col-sm-5"> 
       <h3 class="h3 ">Some heading</h3> 
       <p>some text</p> 
      </div> 

      <div class="hidden-xs col-sm-7" > 
       <img src="images/img_back.jpg" class="img-responsive" > 
      </div> 
     </div> 
</div>

來源

2015-11-02 23:33:54

基本上圖像隱藏在每個分辨率的頂部，除了xs。在所有其他尺寸下，較大的圖像顯示在右側。這似乎會更容易處理。 –

您可以創建兩行，一個用於：大，中，小屏幕。另一個用於額外的小屏幕。 Here一個工作示例。

<div class="container"> 
    <div class="row hidden-xs"> 
    <div class="col-lg-7 col-md-7 col-sm-7 "> 
     <h3 class="h3">Some heading</h3> 
     <p>some text</p> 
    </div> 
    <div class="col-lg-5 col-md-5 col-sm-5 "> 
     <img src="http://lorempixel.com/400/200/" class="img-responsive" /> 
    </div> 
    </div> 
    <div class="row visible-xs"> 
    <div class="col-xs-12 "> 
     <img src="http://lorempixel.com/400/200/" class="img-responsive" /> 
    </div> 
    <div class="col-xs-12 "> 
     <h3 class="h3">Some heading</h3> 
     <p>some text</p> 
    </div> 

    </div> 
</div>

來源

2015-11-02 23:42:08 Bellu

自舉列排序不起作用

回答

相關問題