css - 如何在 bootstrap 中使用 Lesser div

Question

使用 bootstrap 3.3.7 想要的结构可以在下面的链接中找到。问题是通过尽可能少地使用div来解决这种网格系统。 首先，我们有一个带有 col 类的 div，它占据了整个 block 。接下来，我们在它下面有另一个网格，它也占据了大屏幕上的整个 block 。而在手机上，第一个网格将占据左侧部分，另一个网格将占据右侧。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-3 col-xs-12">
    <div class="col-md-12 col-sm-3 col-xs-3" style="border:1px solid;">
      <span> here goes the image  on the top
                    - on small device it should be to the left 
                    </span>
    </div>
    <div class="col-md-12 col-sm-7 col-xs-8" style="border:1px solid;">
      <span> here goes the content on the bottom that include some other grids
                    - on small device it should be to the right of the image above
        </span>
    </div>
  </div>
  <div class="col-md-3 col-md-offset-6 col-xs-12">
    <div class="col-md-12 col-sm-3 col-xs-3" style="border:1px solid;">
      <span>
        *Second div*
        here goes the image  on the top
                    - on small device it should be to the left 
                    </span>
    </div>
    <div class="col-md-12 col-sm-7 col-xs-8" style="border:1px solid;">
      <span> here goes the content on the bottom that include some other grids
                    - on small device it should be to the right of the image above
        </span>
    </div>
  </div>
</div>

Answer 1

使用此代码并更改您的 col-xs-[] col-md-[] 并享受..

.border{
border:1px solid red;
}
.height{
min-height: 100px !important;
}

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


<div class="container">

<div class="row">
  <div class="col-xs-4 border height">
    <div>
      here goes the content on the bottom that include some other grids - on small device it should be to the right of the image above

    </div>
  </div>
  <div class="col-xs-8 border height">
    <div>
      here goes the content on the bottom that include some other grids - on small device it should be to the right of the image above

    </div>
  </div>
</div>

<div class="row">
  <div class="col-xs-4 border height">
    <div>
      here goes the content on the bottom that include some other grids - on small device it should be to the right of the image above

    </div>
  </div>
  <div class="col-xs-8 border height">
    <div>
      here goes the content on the bottom that include some other grids - on small device it should be to the right of the image above

    </div>
  </div>
</div>

</div>