Question

这应该看起来如何，但我不知道如何实现它：

大屏幕：

[picture] [text] [空格] [空格]

片剂/电话：

[空格] [文字] [空格]
[....................图片.....................]

             <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>

Answer 1

＆＃13;

<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>

＆＃13;

重新排序列Bootstrap

1 个答案: