css - Bootstrap 中的 rowspan 和 colspan

Question

目前正在开发 Bootstrap ，在桌面上我得到的结构完全如下所示

column1 column2 column3 column4 column5

但在平板电脑上显示

我需要像下面的结构

column1  `column3`
column2   column4` column5

这是我的html代码

<footer class="footer">
        <div class="row">
            <div class="col-lg-2 col-md-3 col-sm-3 col-xs-2 footer-Darkerblue">
                <p class="footer-ul footer-text-align">
                    <span class="footer-headtext text-uppercase">destination</span><br/>
                    <span class="footer-Kilomet">6.8 Kms </span>
                    <span class="footer-min">25 Min away</span>
                </p>

            </div>
            <div class="clearfix visible-sm visible-md"></div>
            <div class="col-lg-2 col-md-3 col-sm-3 col-xs-2 footer-Darkenblue">
                <ul class="footer-ul footerstatus-text-align">
                    <li class="footer-headtext text-uppercase">
                        Status
                    </li>
                    <li class="footer-min-text">
                        In Transit
                    </li>                       
                </ul>
            </div>
            <div class="clearfix visible-sm visible-md"></div>
            <div class="col-lg-4 col-md-6 col-sm-6 col-xs-4 col-md-push-6">
                <div class="dotted">
                    <ul class="footer-ul footer-direction-text">
                        <li>
                            <i class="fa fa-circle-o direction-icon-circle"></i>
                                <div class="footer-map-text">Geo-Refer Enterprises Inc., Flat B, 39 Acacia Avenue,
                                North End, Silhurst, Loamshire, SH15 6BP</div>
                        </li>
                        <li class="footer-li-pad">
                            <i class="fa fa-map-marker direction-icon"></i>
                                <div class="footer-map-text">As Directed</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="clearfix visible-sm visible-md"></div>
            <div class="col-lg-2 col-xs-2 footer-left-border">
                <ul class="footer-ul">
                    <li>
                        DATE
                    </li>
                </ul>
                <ul class="footer-ul list-inline footer-text-date">
                    <li>
                        <em class="fa fa-calendar"></em> 25 Dec, 2015
                    </li>
                    <li>
                        <em class="fa fa-clock-o"></em> 16:30
                    </li>
                </ul>
            </div>
            <div class="clearfix visible-sm visible-md"></div>
            <div class="col-lg-2  col-xs-2 footer-left-border">
                <ul class="footer-ul">
                    <li>
                        BOOKING REFERENCE
                    </li>
                    <li class="footer-li-pad">
                        92737260
                    </li>
                </ul>
            </div>
        </div>
    </footer>

用我的代码

实际上，通过我上面的代码，我得到了桌面版

但不适用于平板电脑

第 1 列和第 2 列一个在另一个下面，但第 3 列不是从第 1 列开始，而是从第 2 列开始

请帮帮我，我哪里做错了

谢谢

Answer 1

你可以这样构造它:

<div class="col-xs-12 col-md-4">
    <div class="column1 col-xs-2 col-md-6"></div>
     <div class="column3 col-xs-2 col-md-6"></div>
</div>
<div class="col-xs-12 col-md-8">
    <div class="column2 col-xs-2 col-md-4"></div>
    <div class="column4 col-xs-2 col-md-4"></div>
    <div class="column5 col-xs-2 col-md-4"></div>
</div>