自举列排序不起作用

我有以下网格，我试图在右侧显示图像，在左侧显示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

自举列排序不起作用

回答

相关问题