Question

我正在尝试使用bootstrap进行列排序。在桌面屏幕上我想要这个订单。

------ --------------------
|a    |b         |c        |
------|          |----------  
      |          |d        |
      |          |----------
       ----------

在小屏幕上，我想要这个订单。

------ -----------
 |a    |b         |
 ------|          |  
 |c    |          |
 ------|----------|
 |d    |
 -------

从我的代码中，我得到了这个。在上面的图像错误之前。现在我已经改为上面的右图。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">

  <div class="col-sm-4" style="color:black;background:yellow">A
  </div>
  <div class="col-sm-6" style="color:white;">
    <div class="row">
      <div class="col-sm-12    " style="color:white;background:green">B<br>B<br>B<br>B</div>
      <div class="col-sm-4 col-sm-pull-8  " style="color:white;background:red">C</div>
      <div class="col-sm-12 col-sm-pull-8   " style="color:white;background:blue">D</div>
    </div>
  </div>

</div>

Answer 1

这是你想要实现的目标吗？

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

                    <div class="row">
                        <div class="col-sm-6 col-xs-12">
                            <div style="background-color:yellow">
                                1
                            </div>
                            <div style="background-color:green">
                                2
                            </div>
                            <div style="background-color:red">
                                3
                            </div>

                        </div>
                        <div class="col-sm-6 col-xs-12">

                            <div style="background-color:blue">
                                4
                            </div>
                        </div>
                    </div>

＆＃13;

Answer 2

您可以使用两个大小相等的列（类col-sm-6）创建一行。

在最左边的列中，您可以嵌套三行，这些行不需要类，因为它们默认占用所有可用的水平空间（与相同的答案）

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-sm-6">
    <div style="color:black;background:yellow">A</div>
    <div style="color:white;background:red">C</div>
    <div style="color:white;background:blue">D</div>
  </div>
  <div class="col-sm-6">
    <div style="color:white;background:green">B<br>B<br>B<br>B</div>
  </div>
</div>

＆＃13;

带有4列的bootstrap列排序

2 个答案: