html - 如何在 bootstrap 3 中打破列

Question

我在下面的代码中有 4 个框，默认为中等大小，所有 4 个框都在一行中。没关系。在 x-small 尺寸(移动)中，所有 4 个盒子都可以装满。

但尺寸较小(>768px & <1000px):我如何在第 1 行制作 Box1、Box2，在第 2 行制作 Box3、Box4

$(document).ready(function(){
$('head').append('<meta name="viewport" content="width=1000px, initial-scale=1"/>');
});

.box {
border:solid 1px red;
}
.box3,.box4 {
background:grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="box col-sm-6 col-md-4" id="col4_1">Box 1</div>
    <div class="col-sm-6 col-md-8">
      <div class="row">
        <div class="box col-sm-12 col-md-4" id="col4_2">Box 2</div>
        <div class="box box3 col-sm-12 col-md-4" id="col4_3">Box 3</div>
        <div class="box box4 col-sm-12 col-md-4" id="col4_4">Box 4</div>
      </div>
    </div>
  </div>
</div>

Answer 1

由于要检查特定宽度，因此需要使用 Media Queries .不确定这是否可行，但您可以从这里开始

@media all and (max-width: 1000px) {
    #col4_1,
    #col4_2,
    #col4_3,
    #col4_4
    {
        width: 50%;
}