Question

好的，所以我已经阅读了很多答案，但我仍然无法让它为我工作。

我在容器流体中有4个元素。这是他们在桌面上的样子：

这就是他们在移动设备上的样子：

我需要在小（移动）屏幕上更改列的顺序。我需要这个结果：

这应该只是在小屏幕上的顺序。在桌面上它应该像图片1：营销，在线聊天，主要聊天，营销2。

这是HTML：

<div class="row" style="font-size: 150%;"> 
    <div class="col-lg-2 col-sm-12 bg-success"> 
    Marketing

    </div>
    <div class="col-lg-2 col-sm-12 bg-danger"> 
    Online chat

    </div>
    <div class="col-lg-6 col-sm-12 bg-primary"> 
    Main chat

    </div>
    <div class="col-lg-2 col-sm-12 bg-success"> 
    Marketing 2

    </div>
</div>

我尝试过Bootstrap的推拉，但我无法得到它想要的东西。我试过了：

<div class="row"> 
    <div class="col-lg-2 col-lg-push-6 bg-success"> 
    Reklama 1

    </div>
    <div class="col-lg-2 bg-danger"> 
    Online chat

    </div>
    <div class="col-lg-6 col-lg-pull-2 bg-primary"> 
    Main chat

    </div>
    <div class="col-lg-2 col-sm-12 bg-success"> 
    Reklama 2

    </div>
</div>

Answer 1

我会考虑使用小（移动）屏幕，您想说 xs 屏幕尺寸。

我真的不知道它是否是解决问题的最佳方法，但您可以尝试使用hidden-xs和visible-xs更改不同设备尺寸的顺序。

<div class="container">
    <div class="row hidden-xs" style="font-size: 150%;"> 

         <div class="col-lg-2 col-sm-12 bg-success"> 
         Marketing            
         </div>

         <div class="col-lg-2 col-sm-12 bg-danger"> 
         Online chat
         </div>

         <div class="col-lg-6 col-sm-12 bg-primary"> 
         Main chat            
         </div>

         <div class="col-lg-2 col-sm-12 bg-success"> 
         Marketing 2     
         </div>
   </div>
   <div class="row visible-xs" style="font-size: 150%;"> 
        <div class="col-lg-6 col-sm-12 bg-primary"> 
        Main chat    
        </div>

        <div class="col-sm-12 bg-success"> 
        Marketing
        </div>

        <div class="col-sm-12 bg-danger"> 
        Online chat
        </div>

        <div class="col-sm-12 bg-success"> 
        Marketing 2
        </div>
   </div>
</div>

因此，与＃34;主要聊天的模板＆＃34;顶部显示的div仅在xs设备中可见。

Answer 2

我认为解决方案下注方式

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<div class="row"> 
      
    <div class="col-lg-2 col-sm-12 bg-success hidden-xs "> 
    Marketing
    </div>
    <div class="col-lg-6 col-sm-12 bg-primary visible-xs"> 
        Main chat    
   </div>
    <div class="col-lg-2 col-sm-12 bg-danger hidden-xs"> 
    Online chat

    </div>
     <div class="col-sm-12 bg-success visible-xs"> 
        Marketing
        </div>
    <div class="col-lg-6 col-sm-12 bg-primary hidden-xs"> 
    Main chat

    </div>
    <div class="col-sm-12 bg-danger visible-xs"> 
        Online chat
        </div>
    <div class="col-lg-2 col-sm-12 bg-success hidden-xs"> 
    Marketing 2

    </div>
      <div class="col-sm-12 bg-success visible-xs"> 
        Marketing 2
        </div>
</div>

Bootstrap在较小的屏幕上重新排序多个列

2 个答案: