不規則瓷磚的bootstrap css布局 - 使用推拉

Question

我正在使用bootstrap 3.3.2並遇到了令人困惑的情況。 想要的效果如下圖所示

圖片http://imageshack.com/a/img537/8048/MAcoOV.png

我目前的HTML看起來像這樣

 <div class='container'>

        <div style='padding-bottom: 30px;' class='row'>
          <div class='col-md-3 col-sm-3 col-xs-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div>
          <div class='col-md-3 col-sm-3 col-xs-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div>
          <div class='col-md-6 col-sm-6 col-xs-12'><img style='max-width: 100%;'src="http://placehold.it/840x400"></div>
        </div>

        <div style='padding-bottom: 30px;' class='row'>
          <div class='col-md-3 col-sm-3 col-xs-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div>
          <div class='col-md-6 col-sm-6 col-xs-12'><img style='max-width: 100%;'src="http://placehold.it/840x400"></div>
          <div class='col-md-3 col-sm-3 col-xs-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div>
        </div>

        <div style='padding-bottom: 30px;' class='row'>
          <div class='col-md-6 col-sm-6'><img style='max-width: 100%;'src="http://placehold.it/840x400"></div>
          <div class='col-md-3 col-sm-3'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div>
          <div class='col-md-3 col-sm-3'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div>
        </div>

</div> 

我現在對桌面屏幕上的樣子感到滿意。 但是，當屏幕尺寸小於770px或者它突破到col-xs-*網格時，我還需要讓它看起來像下面的圖片。

圖片http://imageshack.com/a/img911/4395/WIt2nk.gif

然而，在小屏幕上，第一行根據需要分成兩行：第一行兩個方形圖像; 第二行一大。 但是desktop圖片上顯示的第2行分為三行：正方形，大圖形，方形。 雖然我需要方形，方形，大。 類似於第三行，因為我需要將大圖像作為最后一行。 我試圖玩css訂單屬性，但它沒有得到我的任何地方。 我還在考慮插入帶有image的額外div並使它們僅在xs網格上顯示，但它似乎是一種矯枉過正。 沒有任何其他想法，並想知道是否有人有小費。 謝謝

Answer 1

始終先考慮移動

對於這一點，你必須使用push和pull 。 所以解決方案將是這樣的

<div class='container'>

        <div style='padding-bottom: 30px;' class='row'>
          <div class='col-md-3 col-sm-3 col-xs-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div>
          <div class='col-md-3 col-sm-3 col-xs-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div>
          <div class='col-md-6 col-sm-6 col-xs-12'><img style='max-width: 100%;'src="http://placehold.it/840x400"></div>
        </div>

        <div style='padding-bottom: 30px;' class='row'>
          <div class='col-md-3 col-sm-3 col-xs-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div>

          <div class='col-md-3 col-sm-3 col-xs-6 col-sm-push-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div>
          <div class='col-md-6 col-sm-6 col-xs-12 col-sm-pull-3'><img style='max-width: 100%;'src="http://placehold.it/840x400"></div>
        </div>

        <div style='padding-bottom: 30px;' class='row'>

          <div class='col-md-3 col-sm-3 col-xs-6 col-sm-push-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div>
          <div class='col-md-3 col-sm-3 col-xs-6 col-sm-push-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div>
          <div class='col-md-6 col-sm-6 col-xs-12 col-sm-pull-6'><img style='max-width: 100%;'src="http://placehold.it/840x400"></div>
        </div>

</div> 

那么究竟是什么我做的是，首先我設計它xs /手機屏幕...然后我用push和pull調整col中sm ， md和lg屏幕。

PS最好使用.img-responsive類而不是style=max-width: 100%; 。