如何在bootstrap 3中实现一个布局，其中一行跨越两行，一列跨越两列

Question

我想实现这样的目标

因此，在图像中，A占据两行而B占据两列

我试过了，就像这样，但正如你所看到的，徽标永远不会 两列宽，因为它在嵌套行内，所以它永远不会看起来对齐，它总是看起来更短或更大

＆＃13;

＆＃13;

.row{
    border:1px solid red;
    
}

.row div{
    
    min-height: 100px;
    border:1px solid black;
    
}

＆＃13;

<div class="container-fluid">
    <div class="row upper-row">
        <div class="col-md-7" id="">
            <div class="row">
                <div class="col-md-12">
                   x
                </div>
                 
            </div>
            <div class="row">
                <div class="col-md-8">
                   s
                </div>
                <div class="col-md-4">
                    LOGO
                </div>
            </div>
        </div>
        <div class="col-md-5" id="">
            A
        </div>
    </div>
    <div class="row bottom-row">
        <div class="col-md-5" id="">
            
        </div>
        <div class="col-md-7" id="">
            B
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-12">
          
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          
        </div>
        <div class="col-md-6">
          
        </div>
      </div>
    </div>
    <div class="col-md-4">
      A
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      
    </div>
    <div class="col-md-8">
      B
    </div>
</div>