Grid system in bootstrap

bootsrap Grid system in

Bootstrap A set of responsive 、 Mobile preferred streaming grid system , Along with the screen or the viewport （viewport） Increase in size , The system will automatically divide it into the most 12 Column .

It's on it bootsrap The explanation on the official website . The official website explains a variety of grid layouts , But it's not clear

Now I want to make such a layout

Very simple layout , I feel that the official website doesn't explain how to realize , Read the rookie tutorial , I've figured it out

bootsrap There are a total of 12 grid , This lattice is horizontal , It has nothing to do with the vertical

The idea of realization ：

1. The layout above A and B Occupy the left 3 grid （ Or column ）, In the middle of the E Occupy 6 grid ,C and D On the right 3 grid
2. A and B Put it in the same class by row Of div in , meanwhile , Horizontally, you should support this row, in other words A and B Each occupies the sub layout 12 grid
3. C and D Same as AB
4. According to the content of the page , Adjust the height of each sub layout

The code is as follows ：

		<div class="col-lg-3">
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">A</div>
                        <div class="panel-body">
                            <div id="m2" style="width: 100%;height:300px;"></div>
                        </div>
                    </div>
                </div>


                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">B</div>
                        <div class="panel-body">
                            <div id="m1" style="width: 100%;height:300px;"></div>
                        </div>

                    </div>
                </div>

            </div>
        </div>

        <div class="col-lg-6">
            <div class="panel panel-default">
                <div class="panel-heading">E</div>
                <div class="panel-body">
                    <div id="m3" style="width: 100%;height:692px;overflow: hidden;margin:0"></div>
                </div>
            </div>
        </div>

        <div class="col-lg-3">
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">SOC(%)C</div>
                        <div class="panel-body">
                            <div id="m4" style="width: 100%;height:300px;"></div>
                        </div>
                    </div>
                </div>


                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">D</div>
                        <div class="panel-body">
                            <div id="m5" style="width: 100%;height:300px;"></div>
                        </div>

                    </div>
                </div>

            </div>
        </div>

After understanding the layout , Other grid layouts should be possible