重新排序列Bootstrap

彘

这是它应该看起来的样子，但我只是想不出如何实现它：

大萤幕：

[图片] [文字] [空白] [空白]

平板电脑/手机：

[空白] [文本] [空白]
[........................图片........ ....]

             <div class="row">
                <div class="col-xs-4 col-sm-push-4"style="background-color:blue;">
                    <p>Text</p>
                </div>
                <div class="col-lg-2 col-lg-push-4 col-xs-pull-4"style="background-color:green; height:200px;"></div>
                  <div class="col-lg-2 col-lg-push-4 col-xs-pull-4"style="background-color:yellow; height:200px;"></div>
                        <div class="col-md-4 col-md-pull-8"style="background-color:red;">
                    <div class="picture"></div>
                </div>                  
            </div>

芜菁

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  
  <div class="col-xs-4 col-xs-push-4" style="background-color:blue;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehe</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitaborum</p>
  </div>
  
  <div class="col-lg-2 col-lg-push-4 col-xs-pull-4 col-xs-4" style="background-color:green; height:200px;">Empty</div>
  
  <div class="col-lg-2 col-lg-push-4 col-xs-4" style="background-color:yellow; height:200px;">Empty</div>
  
  <div class="col-lg-4 col-lg-pull-8 col-xs-12" style="background-color:red;">
    <div class="picture">Picture</div>
  </div>

</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。